Phil Sherry recently reworked some GOV.UK stuff with a view to making it more accessible. This talk covers how he went about this and how he tested his work
impairments Assistive technology Easy wins: design and code – Intermission Part two Browser plugins VoiceOver on macOS & iOS NVDA on Windows Design patterns – Questions Pub @nonswearyphil
people, including — but not limited to — people with disabilities. you lovely people, after tonight What is accessibility? – Adventures in accessibility testing
testing Browsers take care of the following landmark roles: <header> maps to role=“banner” * <nav> maps to role=“navigation” <main> maps to role=“main” <article> maps to role=“article” <section> maps to role=“region” <aside> maps to role=“complementary” ** <footer> maps to role=“contentinfo” * * if not within an article or section element ** recently proposed
impairments Assistive technology Easy wins: design and code – Intermission Part two Browser plugins VoiceOver on macOS & iOS NVDA on Windows Design patterns – Questions Pub
Original version ▸ uses a table – isn’t tabular data ▸ lacking in semantics ▸ hard to navigate ▸ not great for users of screen magnifiers ▸ ridiculously verbose for users of screen readers
1.<div class="check-your-answers"> 2. <h2 class="heading-small">Is your business currently registered for anti-money laundering supervision?</h2> 3. <span class="visuallyhidden">Answer: </span> 4. <p>Money laundering regulations number: 45628975</p> 5. <footer class="group"> 6. <p><a href="registered" class="edit">Edit<span class="visuallyhidden"> your answer for “Is your business currently registered for anti-money laundering supervision?”</span></a></p> 7. </footer> 8.</div>
for everyone • think screen reader first, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research
for everyone • think screen reader first, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research • get familiar with assistive technology
for everyone • think screen reader first, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research • get familiar with assistive technology • be responsible for accessibility where you work
for everyone • think screen reader first, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research • get familiar with assistive technology • be responsible for accessibility where you work • be a decent human and help others
frontendne
irof
yusukebe
oguemon
nealle
kokihirokawa
mkmk884
uhyo
tomokusaba
showwin
ivargrimstad
philipschwarz
rasmusluckow
addyosmani
lara
pauljervisheath
bcantrill
bkeepers
3n
tammyeverts
marcduiker
skipperchong
brettharned
chrisshort
