Skip to content

a11y: Accessibility love#2861

Merged
KingYes merged 12 commits intoelementor:release/1.9.0from
ramiy:a11y
Dec 3, 2017
Merged

a11y: Accessibility love#2861
KingYes merged 12 commits intoelementor:release/1.9.0from
ramiy:a11y

Conversation

@ramiy
Copy link
Copy Markdown
Contributor

@ramiy ramiy commented Nov 29, 2017

This PR fixed several accessibility issues. Separate commit for each issue.

@ramiy
Copy link
Copy Markdown
Contributor Author

ramiy commented Nov 29, 2017

Replace "title" attributes with "aria-label" in <a> tags

The first commit removes title attributes from <a> tags and replaces them with aria-label.

From accessibility point of view, the title attribute doesn't help the screen reader. Instead we should use aria-label. But it should be used only to describe the text. For example: <a href="">View</a> view what? We should use: <a href="" aria-label="View post">View</a>.

Blind people can't see the screen, this is why we use aria-label to add more info for screen readers.

On the other hand, this code: <a href="" aria-label="View">View</a> it has no meaning. It does not add more information.

Reference from WordPress core: https://core.trac.wordpress.org/search?changeset=on&q=Accessibility+Remove+title+attributes&page=2&noquickjump=1

@ramiy
Copy link
Copy Markdown
Contributor Author

ramiy commented Nov 29, 2017

In the other 5 commits I'm removing the title attribute from elements like <div>, <label> and <li>.

In some places we need to remove the title attribute, in some places move the title attribute to inner elements, and in other places replace it with screen-reader-only text.

Preview switcher:

elementor-preview

Template library actions:

elementor-library

Edit tools for widgets/columns/sections:

elementor-edit-tools

@ramiy
Copy link
Copy Markdown
Contributor Author

ramiy commented Nov 29, 2017

The progress widget commit above is based on https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role and several other similar resources.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants