Title: accessibility – Make WordPress Documentation

---

#  Tag Archives: accessibility

 [  ](https://profiles.wordpress.org/estelaris/) [Estela Rueda](https://profiles.wordpress.org/estelaris/)
7:31 pm _on_ February 20, 2022     
Tags: accessibility, [docs ( 158 )](https://make.wordpress.org/docs/tag/docs/),
[helphub ( 44 )](https://make.wordpress.org/docs/tag/helphub/)   

# 󠀁[The hashtag and its future in documentation articles](https://make.wordpress.org/docs/2022/02/20/the-hashtag-and-its-future-in-documentation-articles/)󠁿

[In a previous post](https://make.wordpress.org/docs/2021/02/01/requirements-for-a-new-design-for-the-article-pages-in-user-documentation/),
we listed the requirements for the new design for HelpHub. This article is going
to discuss one particular requirement, the** hashtag at the end of the headlines
inside an article**.

Basically, we want to remove the # character from the headlines. It may be a radical
change but it is necessary for accessibilityAccessibility Accessibility (commonly
shortened to a11y) refers to the design of products, devices, services, or environments
for people with disabilities. The concept of accessible design ensures both “direct
access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s
assistive technology (for example, computer screen readers). (https://en.wikipedia.
org/wiki/Accessibility) reasons.

First of all, let’s mention the requirements to remove or replace the hashtag. The
function must be:

 1. Clear on purpose
 2. Easy to read with keyboard
 3. Reduce visual noise
 4. Not polluting the link’s list for screen readers

## # is it an anchor or a link?

The hashtag is used at the end of a headline in the articles as seen in the image
below. In order to define its future, we need to understand its behavior.

![](https://lh5.googleusercontent.com/Xk5wjGlp4qtY2MPeN6j3jjKJR3a4S7dFv76qDALSDJKRyiIGjfnoDF4bNZyKIdxSnUqWEen55Z82V9nZzl4Gfw8N12B7TonZ6uUld3dCAZNrf3M1gLJVAlcBM3GWxpko-
7qTSRkY)

Image of a headline including the hashtag

The hashtag is a link; the anchor is the H2 in the example above. It’s the anchor
element, but it’s the link behavior, so it is ambiguous.

Technically, anchor refers to the target of an on-page link. This appears to be 
a link that gives easy access to identify the URLURL A specific web address of a
website or web page on the Internet, such as a website’s URL www.wordpress.org that
will give you access to the current location on the document. That’s…actually kind
of complicated.

## What about accessibility?

The icon of the character used is not as important as communicating the function
of the link. Right now, the** #** has aria-hidden=true label, so it won’t be read
at all.

    ```wp-block-code
    <h2 id="requirements-on-the-server-side" class="toc-heading" tabindex="-1">Requirements on the server side <a href="#requirements-on-the-server-side" class="anchor"><span aria-hidden="true">#</span><span class="screen-reader-text">Requirements on the server side</span></a></h2>
    ```

[Link](https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/plugins/support-helphub/inc/handbook-toc/table-of-contents.php#L196)
to the code page, line 196

It’s backed by screen reader text that duplicates the heading title, but is also
nested inside the heading; this means that the heading text will be read  (e.g.)“
Recommended setup Recommended setup”.  It’s creating duplicate text nested inside
the heading and does not expose any visible text to explain the purpose.

## The options

After some research, I have found several options for replacing and/or removing 
the hashtag.

 * Adding the link to the heading with a character
 * Making the heading a link
 * Replacing the hashtag with a fly-out menu

### Adding the link to the heading

Adding the link to the heading,[ as used by GitHub](https://docs.github.com/en/actions/learn-github-actions/introduction-to-github-actions#steps),
where the link is currently the method to expose the link to that section. It can
also be linked from the topics table, at the top of the article. We would have to
make sure the implementation is accessible to others besides sighted mouse users.

![](https://lh3.googleusercontent.com/y3krc6LY_AleYAcw6gBYSEbk1q02uW7sI_xv5PLsxeL2PBLDdRY4WjSkyuGK5yhSKiIrM74gCwB5h8zi1B66MnIrbdaPJTSyAP-
eILbYewQxe1gxr3YSrDjtMCsj6MEcVbwlzu4-)

The link element can be added at the beginning of the headline.

![](https://lh3.googleusercontent.com/FRQDg5sReSPkqKZkQwPJwct65Tp2Hvpn6Gw8jSfD1_brwN3oz9wbIc8w312Vpdjvgfxal4xqC3BOyN76ZRdBY-
WSci4XVcKN7201qT7arw1wEQgcThxXK_7Rzjw0I_CGp1svlXqw)

The link element can also be inserted at the end of the headline.

### Adding the link to the heading 

Adding the link to the heading is reasonable and the simplest solution to replace
the hashtag, as it will simplify the problem: the functionality will be clear and
the visual noise would be reduced considerably.

There are arguments against providing links that point to themselves, however, as
it can make a confusing interaction. One of the arguments against this method is
that it pollutes the link list on a screen reader. The way the hashtag is presented
now, already pollutes the screen reader’s link list.

### Replacing the hashtag

Replacing the hashtag with a fly-out menu, as [explained by the w3.org](https://www.w3.org/WAI/tutorials/menus/flyout/).
The w3.org recommends using the fly-out menu to meet WCAGWCAG WCAG is an acronym
for Web Content Accessibility Guidelines. These guidelines are helping make sure
the internet is accessible to all people no matter how they would need to access
the internet (screen-reader, keyboard only, etc) [https://www.w3.org/TR/WCAG21/](https://www.w3.org/TR/WCAG21/)..
The fly-out menu removes the need for multiple page loads. The biggest disadvantage
is for people with reduced dexterity who can have trouble or it could be almost 
impossible to operate fly-out menus,which can be prevented with the correct implementation.

_Video showing how the fly-out menu operates_

![](https://lh5.googleusercontent.com/xyTNrn1UoVrNxW0OUQtbxKmG2WhftW3xDHLqariK4ycpH3j8gCbM0APGD7ErMfbNayBsL0vKBGqombNZX8QTIs9QHT1oQQ11DyALXyEK_cJ0hpyjjeApkXv-
_nqi4Or7nw8wpHQG)

The design above would be changed to meet the WordPress.orgWordPress.org The community
site where WordPress code is created and shared by the users. This is where you 
can download the source code for WordPress core, plugins and themes as well as the
central location for community conversations and organization. [https://wordpress.org/](https://wordpress.org/)
design style.

### Removing the Symbol

[_Is removing the symbol entirely an option?_](https://www.w3.org/WAI/WCAG21/Techniques/html/H4#examples)_
_Another recommendation from w3.org is placing the interactive elements in an order
that follows sequence. This means adding a table of contents which will link to 
the interactive element, the headline in this case. Basically, the way it is right
now but without the hashtag.

_Video showing mouse-click to headline and the URL pointing to that headline_

## References

 * [Best Practices for Accessible Links, CA State University – Accessible Technology Initiative](https://www.fullerton.edu/ATI/website/best-practices-accessible-links.php)
 * [Making Accessible Links: 15 Golden Rules For Developers, Sitepoint](https://www.sitepoint.com/15-rules-making-accessible-links/)
 * [Are your Anchor Links Accessible? – Automating accessible anchor links by Amber Wilson](https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/#automating-accessible-anchor-links)
 * [Suggestion: adding an option to render a more accessible anchor link issue #82 – valeriangalliat/markdown-it-anchor – GitHub](https://github.com/valeriangalliat/markdown-it-anchor/issues/82)
 * [<link>: The External Resource Link element – HTML – Providing alternative stylesheets- MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#providing_alternative_stylesheets)
 * [Accessibility: heading – Almanac by HTTP archive](https://almanac.httparchive.org/en/2019/accessibility#headings)
 * [Creating valid and accessible links – a11yproject](https://www.a11yproject.com/posts/creating-valid-and-accessible-links/)

We would like to hear from you. Do you have another solution that could meet all
the requirements?

_Props to _[@ryokuhi](https://profiles.wordpress.org/ryokuhi/),_ _[@joedolson](https://profiles.wordpress.org/joedolson/)_,_
[@milana_cap](https://profiles.wordpress.org/milana_cap/)_, _[@jillmugge](https://profiles.wordpress.org/jillmugge/)_
for peer review._

## Update 8 March 2022

We are moving the discussion to a [meta ticket](https://meta.trac.wordpress.org/ticket/6171#ticket)
to discuss options and accessibility.

[#accessibility](https://make.wordpress.org/docs/tag/accessibility/), [#docs](https://make.wordpress.org/docs/tag/docs/),
[#helphub](https://make.wordpress.org/docs/tag/helphub/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fdocs%2F2022%2F02%2F20%2Fthe-hashtag-and-its-future-in-documentation-articles%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/leogermani/) [leogermani](https://profiles.wordpress.org/leogermani/)
4:57 pm _on_ September 23, 2019     
Tags: accessibility, [design ( 6 )](https://make.wordpress.org/docs/tag/design/)

# 󠀁[Summary for HelpHub Meeting 23 September 2019](https://make.wordpress.org/docs/2019/09/23/summary-for-helphub-meeting-23-september-2019/)󠁿

## Attendance

[@FahimMurshed](https://profiles.wordpress.org/fahimmurshed/) [@atachibana](https://profiles.wordpress.org/atachibana/)
[@tomf](https://profiles.wordpress.org/tomf/) [@zzap](https://profiles.wordpress.org/zzap/)
[@ibdz](https://profiles.wordpress.org/ibdz/) [@estelaris](https://profiles.wordpress.org/estelaris/)
[@Kenshino](https://profiles.wordpress.org/kenshino/) (Jon) [@leogermani](https://profiles.wordpress.org/leogermani/)

## Content

[@atachibana](https://profiles.wordpress.org/atachibana/) informs: Now we are redirecting
Codex to Code Reference (DevHub). 210/858 24.5% (last week 23.3%) was done.

Link to the spreadsheet where migrationMigration Moving the code, database and media
files for a website site from one server to another. Most typically done when changing
hosting companies. is being monitored: [https://docs.google.com/spreadsheets/d/15hpEbbnuWJZ0DJafyCeG3CFRMtSxX1gY-RObrrjzzdw/edit#gid=1576070270](https://docs.google.com/spreadsheets/d/15hpEbbnuWJZ0DJafyCeG3CFRMtSxX1gY-RObrrjzzdw/edit#gid=1576070270)

Anyone can join these tasks by following below steps: 
[https://make.wordpress.org/docs/handbook/code-reference/editing-articles/](https://make.wordpress.org/docs/handbook/code-reference/editing-articles/)

[@leogermani](https://profiles.wordpress.org/leogermani/) says Last week we had 
less than 1% of hooksHooks In WordPress theme and development, hooks are functions
that can be applied to an action or a Filter in WordPress. Actions are functions
performed when a certain event occurs in WordPress. Filters allow you to modify 
certain functions. Arguments used to hook both filters and actions look the same.
redirected and now we have 2% \o/

## Design review

[@estelaris](https://profiles.wordpress.org/estelaris/) has been working on a new
design to the [support home page](https://wordpress.org/support/). There was a review
with the design team and they would like to get rid of the grid and use a list instead.

The screenshot of the work in progress was shared in the related ticket: https://
meta.trac.wordpress.org/ticket/4493#comment:8

Related tickets https://meta.trac.wordpress.org/ticket/4492 and https://meta.trac.
wordpress.org/ticket/4491 were also updated and any feedback on the design can be
given there.

## Development

[@milana_cap](https://profiles.wordpress.org/milana_cap/) updates:

 * We are still waiting for [@netweb](https://profiles.wordpress.org/netweb/)’s 
   setup if I haven’t miss anything last week.
 * during Contributor DayContributor Day Contributor Days are standalone days, frequently
   held before or after WordCamps but they can also happen at any time. They are
   events where people get together to work on various areas of [https://make.wordpress.org/](https://make.wordpress.org/)
   There are many teams that people can participate in, each with a different focus.
   [https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/](https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/)
   I did review and updated the Dashboard Widgets page in Common APIs Handbook
 * we had [@Jaap](https://profiles.wordpress.org/jaap/) Wiering working on concept
   for adding AccessibilityAccessibility Accessibility (commonly shortened to a11y)
   refers to the design of products, devices, services, or environments for people
   with disabilities. The concept of accessible design ensures both “direct access”(
   i.e. unassisted) and “indirect access” meaning compatibility with a person’s 
   assistive technology (for example, computer screen readers). (https://en.wikipedia.
   org/wiki/Accessibility) notes and instructions where ever possible in DevHub 
   and HelpHub

[@milana_cap](https://profiles.wordpress.org/milana_cap/) adds that with all the
design changes being worked, it should be better to wait. [@estelaris](https://profiles.wordpress.org/estelaris/)
says that today [#design](https://make.wordpress.org/docs/tag/design/) and [#accessibility](https://make.wordpress.org/docs/tag/accessibility/)
teams should be free and I will get approval for both designs. “Will do my best 
to have them ready for development next week”

## HelpHub rosetta release

[@atachibana](https://profiles.wordpress.org/atachibana/) says “Japanese HelpHub
migration does not have good progress ;-( 7 of 166 (4.2%) was done. We’ll encourage
volunteers.”

[@milana_cap](https://profiles.wordpress.org/milana_cap/) says “Serbian team has
momentum but then we’ve got it enabled on wrong website and waited for fix. It’s
fixed now so I’ll make sure we start working on it this week. I’m trying to encourage
others to lead the project”

## Open Floor

[@leogermani](https://profiles.wordpress.org/leogermani/) asked if there were any
previous discussion on adding a “send feedback” or “inform error” button on the 
articles on HelpHub, to make it easier for people to contribute. Some people currently
open tracTrac Trac is the place where contributors create issues for bugs or feature
requests much like GitHub.[https://core.trac.wordpress.org/](https://core.trac.wordpress.org/).
tickets or send messages in the slackSlack Slack is a Collaborative Group Chat Platform
[https://slack.com/](https://slack.com/). The WordPress community has its own Slack
Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/) 
channel directly.

Apparently there is not and he might open a trac ticket to discuss that.

## Transcript

You can take a look at the meeting transcript via this link: [https://wordpress.slack.com/archives/C02RP4WU5/p1569250806082400](https://wordpress.slack.com/archives/C02RP4WU5/p1569250806082400)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fdocs%2F2019%2F09%2F23%2Fsummary-for-helphub-meeting-23-september-2019%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/milana_cap/) [Milana Cap](https://profiles.wordpress.org/milana_cap/)
8:33 pm _on_ August 26, 2019     
Tags: accessibility, [design ( 6 )](https://make.wordpress.org/docs/tag/design/),
[docs ( 158 )](https://make.wordpress.org/docs/tag/docs/)   

# 󠀁[Summary for HelpHub Meeting 26 August 2019](https://make.wordpress.org/docs/2019/08/26/summary-for-helphub-meeting-26-august-2019/)󠁿

## Attendance

[@estelaris](https://profiles.wordpress.org/estelaris/) [@kafleg](https://profiles.wordpress.org/kafleg/)
[@FahimMurshed](https://profiles.wordpress.org/fahimmurshed/) [@wizzard_](https://profiles.wordpress.org/wizzard_/)
[@softservenet](https://profiles.wordpress.org/softservenet/) [@ibdz](https://profiles.wordpress.org/ibdz/)
[@felipeloureirosantos](https://profiles.wordpress.org/felipeloureirosantos/) [@justin](https://profiles.wordpress.org/justin/)
[@bph](https://profiles.wordpress.org/bph/) [@kenshino](https://profiles.wordpress.org/kenshino/)
[@felipeelia](https://profiles.wordpress.org/felipeelia/) [@milana_cap](https://profiles.wordpress.org/milana_cap/)
[@samikeijonen](https://profiles.wordpress.org/samikeijonen/)

## Development

We discussed several issues today.

### Excerpts on Archives

Last year it was proposed to replace auto generated excerpts with ToC list items.
On today’s meeting discussion it’s been decided to use manually created excerpts
which would contain the point of the article in one sentence. Short and concise.
more meaning, less space.

Join discussion here: https://github.com/WordPress/HelpHub/issues/239

### Posts Order on Archives

This was unsolved for a long time. We decided it’s important to order posts according
to its content complexity so it resembles “Step 1, Step 2..” format or, if this 
doesn’t apply, to order according to post’s “importance”. As this is difficult to
apply automatically to all categories we decided to use Post Attributes order and
intentionally create order which we will specify in WP_Query.

As some articles have more than one categoryCategory The 'category' taxonomy lets
you group posts / content together that share a common bond. Categories are pre-
defined and broad ranging. assigned, in which it might have different “importance”
and order, we decided to make larger steps between posts using the same logic as
menu items in dashboard. So two posts in a succession would have 10 places in between,
rather than 1. This should also help with ordering articles published in the future.

Join discussion here: https://github.com/WordPress/HelpHub/issues/237

### Single article mobile view

Viewing single article on smaller devices reveals the sidebarSidebar A sidebar in
WordPress is referred to a widget-ready area used by WordPress themes to display
information that is not a part of the main content. It is not always a vertical 
column on the side. It can be a horizontal rectangle below or above the content 
area, footer, header, or any where in the theme. throughout the whole visible area.
The rest of Handbooks solve this by hiding the sidebar altogether. [@milana_cap](https://profiles.wordpress.org/milana_cap/)
suggested to place search form and single posts navigation instead of sidebar. For
this single posts navigation to be useful, the order of posts (above) should be 
logical and intuitive.

[@estelaris](https://profiles.wordpress.org/estelaris/) said that she’s working 
on templates and will discuss this issue on [#design](https://make.wordpress.org/docs/tag/design/)
team meeting this Wednesday, as this is effecting all WordPress.orgWordPress.org
The community site where WordPress code is created and shared by the users. This
is where you can download the source code for WordPress core, plugins and themes
as well as the central location for community conversations and organization. [https://wordpress.org/](https://wordpress.org/)
Handbooks.

Join discussion here: https://github.com/WordPress/HelpHub/issues/236

## Design

[@estelaris](https://profiles.wordpress.org/estelaris/) is working on overview of
HelpHub design. Her analysis can be found in Google Spreadsheet: https://docs.google.
com/spreadsheets/d/1ZnhtiLxqjXviFlnWsDE5L8YRiBXtkmanvM8doIc1lrg/edit?usp=sharing

After we agree on design template we need to have [#accessibility](https://make.wordpress.org/docs/tag/accessibility/)
review and usability test. [@samikeijonen](https://profiles.wordpress.org/samikeijonen/)
kindly accepted to perform these testings once we have everything ready.

## Content and Rosetta Releases

We skipped these due to absence of key people.

---

Next Docs meeting is in [#docs](https://make.wordpress.org/docs/tag/docs/) channel
on

 [Monday, September 02, 2019, 15:00 UTC](https://www.timeanddate.com/worldclock/fixedtime.html?iso=20190902T1500)

You can take a look at the meeting transcript via this link: https://wordpress.slack.
com/archives/C02RP4WU5/p1566831612366600

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fdocs%2F2019%2F08%2F26%2Fsummary-for-helphub-meeting-26-august-2019%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/jenmylo/) [Jen](https://profiles.wordpress.org/jenmylo/)
5:00 pm _on_ February 21, 2013     
Tags: accessibility, captions   

# 󠀁[Hello Docs folks There’s a new project set…](https://make.wordpress.org/docs/2013/02/21/hello-docs-folks-theres-a-new-project-set/)󠁿

Hello Docs folks. There’s a new project/set of docs that I think it makes sense 
for this group to be responsible for, but I want to get your input and see if there
are any team members with a bit of a track record of responsibility who’d like to
step up and take charge of it/them (someone who’s not already responsible for another
big project).

As you probably know, the content on wordpress.tv (mostly WordCampWordCamp WordCamps
are casual, locally-organized conferences covering everything related to WordPress.
They're one of the places where the WordPress community comes together to teach 
one another what they’ve learned throughout the year and share the joy. [Learn more](https://central.wordcamp.org/about/).
videos, though starting to include other WP presentations and tutorials, all of 
which you are free to embed in docs) has not been captioned/transcribed. Adding 
captions/transcripts will make this content accessible to deaf and hard of hearing
community members, will make it easier for someone to scan a video’s content, and
will allow search engines to get a better index. As we introduce the ability to 
add caption files, these docs will need to be reviewed and managed.

Volunteers on this project should have good spelling/grammar skills so they can 
correct errors that captioning volunteers make, and should be willing to watch the
videos on wordpress.tv to make sure the captioning volunteers did an accurate job.

The way it will work for now is that volunteers who want to contribute captions 
will do so on a third-party site (we’re recommending amara.org, but anything that
lets you download a ttml file is fine). They’ll download the caption file (only 
the ttml format will work on wordpress.tv), then upload it to wordpress.tv through
a form that will be available only to the vetted volunteers (at least for now).

Whoever steps up here will be a hero in the accessibilityAccessibility Accessibility(
commonly shortened to a11y) refers to the design of products, devices, services,
or environments for people with disabilities. The concept of accessible design ensures
both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility
with a person’s assistive technology (for example, computer screen readers). (https://
en.wikipedia.org/wiki/Accessibility) effort, and will be responsible for wrangling
captioning volunteers and ramping up new ones (eventually we should have some better
docs and systems in place to require less hand-holding).

If anyone is interested in taking point on this, let’s hear it in the comments, 
and I can follow up with anyone who’s interested. We’re ready to launch this on 
Monday.

Note that members of the Accessibility group would participate in this effort under
the aegis of the docs team, since docs is a product team, but accessibility is not.
That said, someone from accessibility group who hasn’t participated in docs before
also would be totally appropriate as the head volunteer.

[#accessibility](https://make.wordpress.org/docs/tag/accessibility/), [#captions](https://make.wordpress.org/docs/tag/captions/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fdocs%2F2013%2F02%2F21%2Fhello-docs-folks-theres-a-new-project-set%2F%23respond&locale=en_US)