Aria attributes - Githubissues

BostonGlobe / slush-globeapp

Starter project for a Boston Globe app website

MIT License

5 stars 1 forks source link

Aria attributes #17

Closed russellsamora closed 7 years ago

russellsamora commented 9 years ago

Each new app should come with a checklist for us to complete:

[ ] Use aria roles (see http://webaim.org/techniques/aria, http://code.tutsplus.com/tutorials/accessibility-part-3-aria--cms-21793)
[ ] Use alt tags for images
[ ] Ensure there is sufficient contrast between text and background (http://leaverou.github.io/contrast-ratio/ maybe useful)

Aria roles:

<header role="banner" /> (only one per page)
<nav role="navigation" />
<main role="main" /> (only one per page)
<article role="article" />
<aside role="complementary" />
<footer role="contentinfo" /> (only one per page)
<button role="button" />
aria-live="off/polite/assertive/rude" (useful for polling, e.g. elections)

Also note a survey of screen readers http://webaim.org/projects/screenreadersurvey3

gabrielflorit commented 8 years ago

also consider adding a 'skip to main content' link, see http://webaim.org/techniques/skipnav/

russellsamora commented 8 years ago

@gabrielflorit https://github.com/BostonGlobe/slush-globeapp/blob/master/templates/src/html/partials/base/base-header.hbs#L1

gabrielflorit commented 8 years ago

@russellgoldenberg nice, works well in VoiceOver Mac

enatario commented 8 years ago

Going to refactor a little according to Eric Bailey's recommendations

https://github.com/ericwbailey/accessible-html-content-patterns

gabrielflorit commented 7 years ago

@enatario can I close this?