How A Screen Reader User Surfs The Web

01:12:48
https://www.youtube.com/watch?v=OUDV1gqs9GA

Summary

TLDRIn this Smashing Magazine webinar, Leonie Watson, a blind screen reader user, illustrates how the web is experienced through screen reading technology. The session delves into how screen readers interact with browsers and websites by utilizing the accessibility tree to comprehend HTML content. Watson uses the JAWS screen reader to explore nominated websites, revealing the nuances of web accessibility or the lack thereof. She highlights the criticality of semantic HTML and proper use of ARIA for enriching web interaction. The webinar underlines accessibility's role not only for the disabled but as a pillar for user-centric design, fostering inclusivity. Through exploring sites like Typeform, BBC, and Smashing Magazine's own, Watson uncovers common pitfalls such as poor navigation cues and incorrectly hidden elements which hinder the user experience. The presentation is essential for web designers and developers aiming to create inclusive web experiences.

Takeaways

  • 🔊 Understanding screen reader user experiences enhances web accessibility.
  • 📄 Semantic HTML underpins better accessibility for different users.
  • ⚙️ Proper ARIA usage enriches web interaction but requires careful implementation.
  • 🗺️ Navigation cues and structure are vital for screen reader efficacy.
  • 👥 Website accessibility benefits all users, not just those with disabilities.
  • ⚠️ Hidden content must be managed correctly to avoid screen reader confusion.
  • 🔑 Screen readers use specific shortcuts for web navigation beyond visual cues.
  • 🖥️ Testing with various screen readers ensures broader accessibility.
  • 🔍 Developers should explore accessibility tools to enhance web inclusivity.
  • 🌐 ARIA in itself does not impose functionality; proper scripting is essential.

Timeline

  • 00:00:00 - 00:05:00

    Bruce Lawson introduces Leonie Watson, a blind screen reader user, for a webinar demonstrating how websites work with screen readers. Leonie will evaluate websites suggested by Smashing Magazine members.

  • 00:05:00 - 00:10:00

    Leonie explains the interaction between a screen reader and a browser, emphasizing how browsers create an accessibility tree for screen readers to interpret web page HTML.

  • 00:10:00 - 00:15:00

    Using Bruce Lawson's personal site, Leonie demonstrates how a screen reader announces page elements like regions and headings, facilitating non-visual navigation.

  • 00:15:00 - 00:20:00

    On Bruce's site, Leonie navigates using HTML5 sectioning elements or ARIA roles, emphasizing the efficient use of screen readers for exploring page structure.

  • 00:20:00 - 00:25:00

    Leonie encounters accessibility issues with Typeform while trying to fill out a form, highlighting the importance of visual and non-visual consistency in web design.

  • 00:25:00 - 00:30:00

    Leonie discusses the significance of properly hiding content and shares her experience with Typeform contacting Smashing Magazine for assistance due to usability issues.

  • 00:30:00 - 00:35:00

    Exploration of BBC's website showcases effective accessibility design despite high content volume; navigation through headings and regions proves beneficial.

  • 00:35:00 - 00:40:00

    Leonie attempts to find unemployment information on the Massachusetts government site, expressing challenges with the interface's unintended screen reader complications.

  • 00:40:00 - 00:45:00

    Discussion about ARIA roles and HTML elements for accessibility reveals testing complexities and the importance of keyboard interaction for ARIA-implemented designs.

  • 00:45:00 - 00:50:00

    Leonie uses her personal blog to illustrate the effective use of ARIA for toggle buttons and discusses HTML versus ARIA for accessibility enhancements.

  • 00:50:00 - 00:55:00

    Leonie evaluates The Intercept for heading structure, which leads to confusion, demonstrating the critical role of semantic structure in web accessibility.

  • 00:55:00 - 01:00:00

    Navigating Smashing Magazine's site reveals clutter that complicates screen reader experience, pointing to usability issues despite accessible HTML.

  • 01:00:00 - 01:05:00

    Apart from HTML accessibility, Leonie identifies issues with extra content and improper alt text that can hinder navigation for visually impaired users.

  • 01:05:00 - 01:12:48

    Through examples, Leonie shows effective table navigation techniques with screen readers, discussing the role of proper HTML markup for accessibility.

Show more

Mind Map

Video Q&A

  • Who is Leonie Watson?

    Leonie Watson is a blind screen reader user and a speaker in the webinar, demonstrating how she uses the web.

  • What is the Smashing Magazine webinar about?

    The webinar is about understanding how the web sounds to a screen reader user, with Leonie Watson exploring various websites.

  • What screen reader does Leonie Watson use?

    Leonie Watson uses the JAWS screen reader.

  • What is the relationship between a screen reader, browser, and website code?

    The screen reader interacts with the browser's accessibility tree, which provides information about the HTML elements and structure.

  • What does Leonie Watson focus on during the webinar?

    She focuses on exploring websites using her screen reader and highlighting the importance of website accessibility.

  • How does the webinar help the community?

    It provides insights into screen reader experiences, emphasizing the importance of web accessibility, which benefits the community by fostering more inclusive web design.

  • What are some issues with Typeform that Leonie mentions?

    Typeform has accessibility issues with hidden content not being properly managed for screen readers, causing confusion.

  • What is Aria and why is it used?

    Aria is used to improve web element accessibility. It enhances HTML by providing additional contextual information for assistive technologies.

  • What is a common problem with web menus and screen readers?

    Menus often don't provide the expected keyboard interactions or screen reader cues, complicating navigation.

  • What does the term "application mode" mean in the context of screen readers?

    When a screen reader enters application mode, it no longer uses its own shortcuts, allowing web pages to control navigation.

View more video summaries

Get instant access to free YouTube video summaries powered by AI!
Subtitles
en
Auto Scroll:
  • 00:00:01
    [Music]
  • 00:00:03
    hi YouTube I'm Bruce Lawson
  • 00:00:05
    commissioning editor for Smashing TV at
  • 00:00:07
    Smashing Magazine and this is Kittel e
  • 00:00:11
    The Smashing Magazine mascot following
  • 00:00:14
    now is a 1 hour 20 minute webinar with
  • 00:00:17
    Leonie Watson who is a blind screen
  • 00:00:21
    reader user and she's looking at some
  • 00:00:23
    websites nominated by Smashing Magazine
  • 00:00:25
    members to show you how the web sounds
  • 00:00:29
    to a screen reader user we decided that
  • 00:00:33
    this was so important for the community
  • 00:00:35
    to know that we're giving this away for
  • 00:00:36
    free but we run free like this every
  • 00:00:39
    month and if you're a smashing member
  • 00:00:41
    you have access to them free it's 5 or 9
  • 00:00:45
    US dollars a month and you can cancel
  • 00:00:47
    anytime anyway hope you enjoy
  • 00:00:52
    listen okay you go and have a very brief
  • 00:00:55
    lie down because of all the stress so
  • 00:00:59
    good have to noon
  • 00:01:01
    smashing members apologies for that
  • 00:01:04
    we've had two rehearsals and as is the
  • 00:01:09
    traditional case of Technology as soon
  • 00:01:12
    as you go alive everything goes wrong
  • 00:01:15
    I'm not entirely sure that we can blame
  • 00:01:18
    zoom for being particularly on screen
  • 00:01:20
    reader friendly I think it wouldn't
  • 00:01:23
    Bruce friendly or I'm too stupid to be
  • 00:01:26
    able to set it up myself but I'm
  • 00:01:28
    delighted to be able to introduce you to
  • 00:01:32
    or reintroduce you to Leonie Watson it
  • 00:01:35
    was an old friend of mine we've known
  • 00:01:37
    each other since 2000 and single digits
  • 00:01:42
    when we were both on the committee of
  • 00:01:46
    the British Standards institution
  • 00:01:49
    drafting the British standard for
  • 00:01:51
    commissioning accessible websites and
  • 00:01:53
    she's been trying to avoid me ever since
  • 00:01:56
    I keep on keep on sneaking up on her she
  • 00:02:01
    you can't see her but I know that she
  • 00:02:03
    has lavish and gorgeous purple hair
  • 00:02:06
    which is why I'm wearing my magnificent
  • 00:02:08
    shirt Leonie which is bright green huge
  • 00:02:12
    circles on it in those circles of
  • 00:02:15
    flowers of purple orange yellow red and
  • 00:02:21
    it's just the worst fabric in the world
  • 00:02:24
    there are times you know when I'm
  • 00:02:26
    actually quite glad I can't see a thing
  • 00:02:28
    I know that you were able to smell
  • 00:02:32
    glamorous so so Leonie as you know
  • 00:02:37
    smashing members is going to take us
  • 00:02:40
    through some sights some of the ones
  • 00:02:42
    that you've nominated in a spirit of
  • 00:02:46
    friendliness and helpfulness rather than
  • 00:02:48
    trying to tell anybody off and she's
  • 00:02:51
    going to do my site as well so I'm going
  • 00:02:54
    to be brave and learn a lot and show you
  • 00:02:57
    how the web he is to a screen reader
  • 00:03:00
    user so give it up for Larry Watson
  • 00:03:03
    hooray Leonie thanks Bruce and hello
  • 00:03:06
    buddy as Bruce said we're going to go on
  • 00:03:10
    a bit of an adventure to get them I'm
  • 00:03:12
    going to take a look at some websites
  • 00:03:13
    using my screen reader of choice which
  • 00:03:17
    is still I have to say the jaws screen
  • 00:03:20
    reader mostly just because I've been
  • 00:03:22
    using it for so long now it's very
  • 00:03:25
    familiar to me and consequently very
  • 00:03:28
    easy to use we're going to look at all
  • 00:03:31
    sorts of different websites before we
  • 00:03:32
    dive in though I just want to take a
  • 00:03:34
    couple of minutes to tell you something
  • 00:03:37
    about the relationship between a screen
  • 00:03:40
    reader the browser and the code of the
  • 00:03:44
    website and it really is the code for
  • 00:03:46
    the most part that screen readers are
  • 00:03:48
    most interested in what happens when the
  • 00:03:51
    browser gets hold of an HTML document is
  • 00:03:53
    that the browser passes that document
  • 00:03:56
    and it does a whole bunch of stuff with
  • 00:03:58
    it
  • 00:03:58
    it creates the document object model
  • 00:04:01
    that we use particularly when we're
  • 00:04:04
    scripting functionality into the page it
  • 00:04:07
    creates a visual rendering of the
  • 00:04:09
    document the bit that most people see on
  • 00:04:11
    screen in some cases it'll give some
  • 00:04:14
    default styling to elements headings or
  • 00:04:17
    form fields for example if you do
  • 00:04:19
    nothing with them we'll still have a
  • 00:04:21
    visual design display on the page and
  • 00:04:23
    the browser also creates something
  • 00:04:26
    called an accessibility tree and it only
  • 00:04:28
    does this if it detects that an
  • 00:04:31
    assistive technology like a screen
  • 00:04:32
    reader is running screen reader then
  • 00:04:35
    comes along and grabs a whole bunch of
  • 00:04:38
    information from that accessibility tree
  • 00:04:41
    that's all the accessibility information
  • 00:04:44
    about the HTML that the document
  • 00:04:45
    consists of so as we go through this
  • 00:04:48
    exploration together every time you hear
  • 00:04:51
    my screenreader say something about an
  • 00:04:53
    element on the page that's where the
  • 00:04:55
    screen reader is getting the information
  • 00:04:56
    from it's going to the browser and
  • 00:04:58
    saying hey this element tell me all the
  • 00:05:00
    accessibility information you've got
  • 00:05:01
    about it what is it what's it for what's
  • 00:05:04
    it got in the middle what's its name how
  • 00:05:06
    do I refer to it all of that kind of
  • 00:05:09
    thing so it really is a very close-knit
  • 00:05:10
    relationship between the browser and the
  • 00:05:12
    screen reader that happens in order to
  • 00:05:15
    make all of this work so
  • 00:05:18
    said let's make a start so I did
  • 00:05:21
    sensible thing in menu application menu
  • 00:05:24
    installed a few websites the intercept
  • 00:05:28
    survey months Mathematica Bruce Lawson
  • 00:05:30
    citing ina 14 menus about land land
  • 00:05:36
    Bruce Lawson's personal site Mozilla
  • 00:05:37
    Firefox Bruce Lawson's personal sites 27
  • 00:05:40
    regions 21 betting's and 187 Lee Bruce
  • 00:05:43
    Lawson's personal site visited heading
  • 00:05:45
    level 1 link Bruce Lawson Lawson's so
  • 00:05:47
    I'm gonna stop that there first thing
  • 00:05:48
    you learn when you've got a screen
  • 00:05:49
    reader is the key to stop it talking
  • 00:05:51
    there is only so much talking in your
  • 00:05:53
    ear you can cope with during the course
  • 00:05:55
    of the day and in most screen readers
  • 00:05:57
    the ctrl key is what will stop it
  • 00:05:59
    talking what you heard then was the
  • 00:06:02
    screen reader do several things as the
  • 00:06:04
    page loaded it told me the title of the
  • 00:06:07
    site Bruce Lawson's personal site that's
  • 00:06:10
    the bit that's contained in the title
  • 00:06:11
    element inside the head elements on the
  • 00:06:14
    page these days I understand in the
  • 00:06:17
    visual appearance of browsers that's not
  • 00:06:19
    a very visible piece of information back
  • 00:06:21
    in the day when I last saw a browser the
  • 00:06:24
    title was very often displayed quite
  • 00:06:26
    prominently at the top of the browser
  • 00:06:27
    window but for a screen reader user it's
  • 00:06:30
    still the first piece of information
  • 00:06:31
    that you encounter on the page and it's
  • 00:06:33
    incredibly useful because it's often the
  • 00:06:35
    first guarantee or first confirmation
  • 00:06:37
    you've got that you've ended up on the
  • 00:06:39
    page that you intended to reach you
  • 00:06:42
    might also have heard that the screen
  • 00:06:44
    reader then just gave a quick summary of
  • 00:06:45
    some of the key elements on the page it
  • 00:06:48
    told me there were some regions on the
  • 00:06:49
    page and some headings so already that's
  • 00:06:52
    given me a bit of a clue as to how I can
  • 00:06:55
    start exploring this page one thing you
  • 00:06:58
    can't do as a blind screen reader user
  • 00:07:01
    is taking the page at a whole glance
  • 00:07:04
    when most sighted people look at a page
  • 00:07:06
    they'll kind of notice yeah I can see
  • 00:07:08
    the header in the footer and maybe the
  • 00:07:10
    navigation off to one side and a Content
  • 00:07:12
    area somewhere but of course you can't
  • 00:07:14
    do that sort of holistic assessment of a
  • 00:07:16
    page as a screen reader user what you
  • 00:07:19
    can do though is use the regions of a
  • 00:07:21
    page so indoors if I hit the R key will
  • 00:07:25
    start to explore the page in regional
  • 00:07:28
    chunks like this navigation region so it
  • 00:07:31
    tells me there's another guy
  • 00:07:32
    region on the page and if I hit that key
  • 00:07:34
    again search the site clickable search
  • 00:07:36
    region I've got a search region on the
  • 00:07:38
    page main region a main region which
  • 00:07:41
    tells me all things being called that's
  • 00:07:43
    the main content area of the page that
  • 00:07:45
    in level 2 link reading list better and
  • 00:07:47
    then I come to more Academy did were
  • 00:07:55
    mated some content information so that's
  • 00:07:59
    the the footer there and we can keep
  • 00:08:01
    going through the page like this to find
  • 00:08:04
    the different sort of chunks and all
  • 00:08:05
    this is picked up probably by the use of
  • 00:08:08
    the html5 sectioning elements header
  • 00:08:10
    footer nav main or it could possibly be
  • 00:08:14
    because Bruce is using the Aria role
  • 00:08:17
    equivalent role equals banner role
  • 00:08:19
    equals content info for footer role
  • 00:08:21
    equals main role equals navigation the
  • 00:08:24
    other side it's the element is it good
  • 00:08:26
    so this by far the best way to do it is
  • 00:08:28
    a nice simple accessible HTML but in
  • 00:08:32
    doing so in that one short cut I can
  • 00:08:34
    move from big chunk of the page to the
  • 00:08:35
    next and it starts to give me a sense of
  • 00:08:37
    the whole the whole page has ended the
  • 00:08:39
    key blocks that make it up
  • 00:08:41
    brutalizer so if I go back to the top of
  • 00:08:43
    the page
  • 00:08:44
    another exploration strategy I've got is
  • 00:08:46
    to use headings and this is really
  • 00:08:49
    common amongst a lot of screen readers
  • 00:08:51
    so what I'm going to do is combine the
  • 00:08:52
    two I'm going to use the the region
  • 00:08:54
    shortcut to go back to the main content
  • 00:08:57
    area of the page visited heading level
  • 00:09:00
    one Lee Bruce Lawson's personal site
  • 00:09:01
    that navigation region search the site
  • 00:09:03
    clickable main region now I remember
  • 00:09:07
    that the summary my screen reader gave
  • 00:09:09
    me when the page first loaded told me
  • 00:09:10
    that there were some headings available
  • 00:09:12
    so now I'm going to use another shortcut
  • 00:09:14
    H and again this is pretty common to all
  • 00:09:16
    screen readers to start using headings
  • 00:09:19
    as a way of navigating through the page
  • 00:09:20
    so if I hit H the first time reading
  • 00:09:23
    list heading level 2 link I get a
  • 00:09:24
    reading list so I'm gonna keep going
  • 00:09:28
    smart TV heading level 2 link sounds
  • 00:09:32
    quite interesting but I'll keep going
  • 00:09:33
    just for the sake of exploration English
  • 00:09:35
    heading level 2 link reading list
  • 00:09:38
    reading list heading level 2 Linda
  • 00:09:40
    reading reading with heading level 2
  • 00:09:41
    Link the practical value of semantic 8
  • 00:09:46
    in level two link kind of thing the
  • 00:09:48
    practical value of semantic HTML so I've
  • 00:09:51
    been able to explore through the page
  • 00:09:52
    using a couple of just very simple
  • 00:09:54
    strategies that's helped me move to the
  • 00:09:56
    main area of the page that seemed like a
  • 00:09:59
    good place to start and then to use
  • 00:10:01
    headings to skim down the list of
  • 00:10:03
    Bruce's articles and now I found what
  • 00:10:05
    I'm interested in
  • 00:10:06
    I can hit main region article region the
  • 00:10:09
    practical value of semantic HTML heading
  • 00:10:11
    level tool in permanently to the
  • 00:10:13
    practical value of semantic HTML Bruce
  • 00:10:15
    Lawson's personal site so practical
  • 00:10:16
    value of semantic HTML Mozilla Firefox
  • 00:10:18
    or so again then we got the title
  • 00:10:20
    readout just before the name of the
  • 00:10:23
    browser and again it's got that
  • 00:10:25
    confirmation that I've used or hit the
  • 00:10:28
    Lincoln I mean successfully taken to the
  • 00:10:30
    place I wanted to go so I'm yeah full
  • 00:10:34
    kudos to brush for using lots of nice
  • 00:10:37
    HTML touches that make my experience as
  • 00:10:39
    a screen reader user
  • 00:10:40
    you know nice and easy for navigating
  • 00:10:42
    around and finding content things sadly
  • 00:10:46
    are not always quite this easy one of my
  • 00:10:51
    platforms I love to hate at the moment
  • 00:10:54
    is type form menu application type form
  • 00:10:57
    14:40 www.caucusnj.org reticle million
  • 00:11:04
    semantic HTML Bruce Lawson we got some I
  • 00:11:08
    came across this website when the lovely
  • 00:11:11
    people at Smashing Magazine sent me an
  • 00:11:12
    email not long ago to say it's our first
  • 00:11:15
    birthday as a membership organization
  • 00:11:18
    and we'd like to send you some swag well
  • 00:11:21
    I thought and headed over to the forum
  • 00:11:23
    they asked me to complete
  • 00:11:26
    unfortunately they chosen to use type
  • 00:11:29
    form as a lot of people do it's a very
  • 00:11:31
    convenient platform to use for creating
  • 00:11:33
    all sorts of forms and other bits and
  • 00:11:36
    pieces but this is why it's a problem
  • 00:11:39
    from my point of view this time I'm
  • 00:11:41
    gonna bypass those two strategies I
  • 00:11:44
    mentioned before and I'm just going to
  • 00:11:46
    use a very blunt instrument I'm going to
  • 00:11:48
    use the diet down arrow key and this
  • 00:11:50
    just literally means I'm going to
  • 00:11:51
    explore the website one line of
  • 00:11:53
    information at a time it's a bit
  • 00:11:55
    painstaking but it's a very thorough way
  • 00:11:58
    of finding out what's available on the
  • 00:11:59
    page
  • 00:12:00
    so here we go when heading level one
  • 00:12:04
    we're celebrating one year all aboard
  • 00:12:06
    this matching membership and have a
  • 00:12:07
    little gift for you excellent heading
  • 00:12:09
    level one oh it's really well nice
  • 00:12:11
    heading one at the top of the page the
  • 00:12:12
    most important heading level tells me
  • 00:12:14
    I'm in the right place and we mean
  • 00:12:17
    business so let's keep going Oh sounds
  • 00:12:21
    like I should probably just hit that but
  • 00:12:23
    I'll just keep going just to make sure
  • 00:12:25
    that then it says press ENTER okay
  • 00:12:27
    should I press ENTER on the start button
  • 00:12:29
    or is that just a general instruction
  • 00:12:31
    that they've put floating near the
  • 00:12:33
    button who knows
  • 00:12:34
    we'll keep going just to be sure land
  • 00:12:35
    heading level one check mark Oh got
  • 00:12:38
    another heading one done now I'm
  • 00:12:40
    guessing at this point you can't see
  • 00:12:42
    this on screen if you happen to be
  • 00:12:44
    looking but from my point of view when I
  • 00:12:45
    go to this page I'm done already Wow
  • 00:12:48
    damn these guys at Smashing Magazine
  • 00:12:50
    again heading level one thank you for
  • 00:12:51
    your kind support M - it lets us read
  • 00:12:53
    history club that's they all are
  • 00:12:54
    contributors fairly and reduced
  • 00:12:56
    advertising on the site was a piece of
  • 00:12:58
    information that is only visually
  • 00:13:00
    displayed at the conclusion of filling
  • 00:13:02
    out the form unfortunately due to the
  • 00:13:05
    way that type form does things these
  • 00:13:07
    messages are not hidden in a way that
  • 00:13:09
    hides them from screen reader users
  • 00:13:10
    they're hidden visually but that's it so
  • 00:13:13
    I was already quite confused I had a
  • 00:13:15
    stop button and quite clearly a finish
  • 00:13:17
    message and yeah that was pretty much
  • 00:13:21
    where the rods heading level 1 will let
  • 00:13:22
    you know in early December when you're
  • 00:13:24
    done you start sailing out the who
  • 00:13:25
    heading level 1 you can close this tab
  • 00:13:27
    now excellent and the other thing I
  • 00:13:29
    noticed was lots of heading once all of
  • 00:13:31
    this text is in heading level 1 so
  • 00:13:33
    there's no sense of whether one heading
  • 00:13:35
    is more important than the other whether
  • 00:13:36
    all that text is combined into one
  • 00:13:38
    single heading just broken over several
  • 00:13:40
    lines so it's all a little bit of a mess
  • 00:13:43
    anyway back to the top and I'll do the
  • 00:13:47
    logical thing I'll hit the start ever
  • 00:13:48
    main region what's your full name edit
  • 00:13:51
    what's your whole name edit so here
  • 00:13:53
    things got mostly a little bit easier I
  • 00:13:55
    could type in my full name that was
  • 00:13:57
    quite easy to do what's your email edit
  • 00:14:01
    enter my email keep tapping and then it
  • 00:14:06
    asked me what did I want
  • 00:14:07
    did I want a t-shirt
  • 00:14:10
    submit button okay so let's go back to
  • 00:14:12
    that main readin what he not to me
  • 00:14:15
    and my screen reader that just sounds
  • 00:14:17
    like a piece of plain text there's no
  • 00:14:19
    indication that it's a link or a form
  • 00:14:22
    field at some point radio button or
  • 00:14:24
    checkbox so no indication that actually
  • 00:14:27
    that piece of information is interactive
  • 00:14:30
    other than the fact that by logical
  • 00:14:32
    deduction based on the text it's asking
  • 00:14:35
    me to make a selection between it and
  • 00:14:37
    something else at this point I had to
  • 00:14:40
    give up I must confess and call on my
  • 00:14:44
    friends at Smashing Magazine who very
  • 00:14:46
    kindly and blushingly acknowledge that
  • 00:14:48
    this was not a great platform to be
  • 00:14:50
    using switched over to another platform
  • 00:14:53
    and all was well and I can happily say I
  • 00:14:57
    have got my swag and it is safely
  • 00:14:59
    sitting on my desk for all the same so
  • 00:15:03
    making sure that content is hidden
  • 00:15:05
    properly when you need it to be hidden
  • 00:15:07
    is incredibly important that done
  • 00:15:10
    message that appeared to me but not to
  • 00:15:12
    everyone else completely the wrong time
  • 00:15:14
    in in completely the wrong place was
  • 00:15:16
    incredibly confusing so it's not just
  • 00:15:19
    good enough to hide something visually
  • 00:15:21
    you've got to tuck it away good and
  • 00:15:23
    proper good techniques for doing that
  • 00:15:24
    display:none in CSS or the HTML hidden
  • 00:15:28
    attribute both of those will hide
  • 00:15:31
    content pretty much from everybody and
  • 00:15:34
    anybody so yep something else that's
  • 00:15:37
    very important to do okay let's go and
  • 00:15:41
    have a look at another example being XXL
  • 00:15:45
    extra X mmm
  • 00:15:46
    escape escape Tiberio ulti menu app type
  • 00:15:51
    for the intercept sir Survey Monkey
  • 00:15:53
    Smashing Magazine mass.gov 10 Bruce
  • 00:15:56
    Lawson sub BBC technology available as
  • 00:15:58
    the answer on a sleeve page button the
  • 00:16:00
    BBC does a fantastic job at
  • 00:16:03
    accessibility had a lot of practice of
  • 00:16:08
    it they've got very good internal
  • 00:16:09
    standards on page but we've paid sites
  • 00:16:16
    are very easy to navigate despite the
  • 00:16:18
    fact that they've got an awful lot of
  • 00:16:20
    content on them technology BBC news I
  • 00:16:23
    so technology BBC news again that title
  • 00:16:26
    is is really useful I'm going to use the
  • 00:16:29
    down arrow technique again just to
  • 00:16:30
    explore for a little while because it
  • 00:16:32
    gives us access to some more information
  • 00:16:34
    when heading level two we've updated our
  • 00:16:37
    privacy and cookies policies we made
  • 00:16:40
    some important changes to our privacy
  • 00:16:42
    and cookies policy a blank list of two
  • 00:16:44
    items ok but maybe never find out yes I
  • 00:16:51
    agree button I agree so this is an
  • 00:16:54
    interesting situation with the screen
  • 00:16:56
    reduce weird things that pop up and
  • 00:16:59
    present themselves to you screen readers
  • 00:17:00
    aren't always terribly good at letting
  • 00:17:02
    you know they're there was until I hit
  • 00:17:04
    the key then to move down a line that I
  • 00:17:07
    noticed there was a yes agree button and
  • 00:17:09
    and so you do get used to it as a screen
  • 00:17:12
    reader user that you find content has
  • 00:17:14
    unexpectedly appeared without you being
  • 00:17:15
    aware of it until you started
  • 00:17:17
    interacting with it but yeah that's
  • 00:17:20
    something that's an interesting point
  • 00:17:23
    let's keep going anyway
  • 00:17:27
    [Music]
  • 00:17:29
    same page with more dead Explorer
  • 00:17:37
    same page link more same page link is is
  • 00:17:40
    how screen readers mostly identify an
  • 00:17:43
    internal link so something like a skip
  • 00:17:45
    link or a link that will lead somewhere
  • 00:17:47
    else on the same page this is an
  • 00:17:50
    interesting one because based on the
  • 00:17:52
    fact that it says more I actually would
  • 00:17:54
    expect it to disclose some content to
  • 00:17:57
    pop up some more content when I activate
  • 00:17:59
    it not move me to another part on the
  • 00:18:00
    page so let's hit enter on it and see
  • 00:18:03
    what happens
  • 00:18:04
    enter same page link more BBC banner
  • 00:18:06
    region BBC navigation region marked DB
  • 00:18:09
    food besides Earth Arts made it digital
  • 00:18:10
    taste their local tomorrow's world TV
  • 00:18:12
    radio heading level one more people
  • 00:18:14
    that's interesting I have no idea
  • 00:18:18
    technology BBC News Mozilla Firefox C BT
  • 00:18:21
    banner who more I just used a command to
  • 00:18:23
    say to my screen reader tell me what the
  • 00:18:25
    title of the page isn't it seems I'm
  • 00:18:27
    still on the same page based on the
  • 00:18:29
    title let's see five point leg search
  • 00:18:34
    the BBC button leg heading level two
  • 00:18:36
    more
  • 00:18:37
    little dwell by okay so it did place me
  • 00:18:39
    somewhere with some more content quickly
  • 00:18:41
    BBC size girth make a digital link
  • 00:18:49
    taster link local see I'm not entirely
  • 00:18:51
    certain about that uncertainty in my
  • 00:18:54
    voice so what I'm gonna do is just use
  • 00:18:56
    headings more heading level two is more
  • 00:18:59
    heading where I'd been taken on the page
  • 00:19:01
    accessibility links heading level
  • 00:19:03
    wrapping the bottom explore the BBC
  • 00:19:05
    heading level two are you like Jared
  • 00:19:08
    heading level three lid Tecna
  • 00:19:10
    accessibility links heading level to the
  • 00:19:14
    top of the page that accessibility
  • 00:19:15
    heading more heading level two so the
  • 00:19:17
    more has opened I think when search the
  • 00:19:21
    BBC edit search the search the BB list
  • 00:19:23
    at same click sounds link iPlayer
  • 00:19:25
    visited link wetlands idly sounds same
  • 00:19:27
    page link more use jaws P plus all
  • 00:19:35
    slipped with BBC navigation region end
  • 00:19:39
    search the BBC clickable search the
  • 00:19:41
    beheaded search the BB Blagdon level
  • 00:19:47
    twelve items from my point it probably
  • 00:19:49
    doesn't matter too much so either way I
  • 00:19:51
    will continue exploring I'll bypass that
  • 00:19:54
    list of twelve items although it is
  • 00:19:59
    worth noting this is one of the good
  • 00:20:00
    things about list markup in HTML is that
  • 00:20:03
    the browser there's lots of lovely
  • 00:20:05
    things it will tell you what sort of
  • 00:20:07
    list it is it'll tell you the difference
  • 00:20:09
    between just a straightforward ordered
  • 00:20:10
    list unordered list and an ordered one
  • 00:20:12
    and it'll also count up the number of
  • 00:20:14
    list items inside it and make that
  • 00:20:16
    information available to the
  • 00:20:17
    screenreader
  • 00:20:18
    so when I come across a list heading
  • 00:20:21
    level two more little later you
  • 00:20:23
    automatically get told how many items
  • 00:20:25
    there are in it and that helps me make a
  • 00:20:27
    decision about whether I want to just
  • 00:20:29
    keep using the arrow key to navigate
  • 00:20:31
    through one of the line at a time
  • 00:20:33
    or whether I maybe just want to use
  • 00:20:35
    another shortcut to navigate straight
  • 00:20:36
    past it I don't fancy wading through
  • 00:20:38
    twelve items in a list of anything so
  • 00:20:41
    I'm going to use headings to keep
  • 00:20:43
    jumping through the page
  • 00:20:44
    BBC news navigate and heading level two
  • 00:20:47
    got a navigation block there which is
  • 00:20:49
    good but I don't think we want that
  • 00:20:50
    technology heading level one get to
  • 00:20:53
    technology heading number one so again
  • 00:20:55
    this heading one is a great indication
  • 00:20:57
    that I'm at the start of the interesting
  • 00:20:59
    part of the page the main content area
  • 00:21:01
    top stories heading level 2 clickable
  • 00:21:03
    some children SmartWatch recalled over
  • 00:21:08
    date of birth heading level 3 link and
  • 00:21:10
    as we get down into the heading 3 as we
  • 00:21:12
    start to see the actual headlines
  • 00:21:14
    related content heading level 4 in this
  • 00:21:16
    case its content crypto exchange
  • 00:21:20
    founders that lakhs dollar 100 for the
  • 00:21:22
    impending level 3 link we've got a very
  • 00:21:23
    easy way again of just using those very
  • 00:21:26
    same simple techniques for just
  • 00:21:28
    navigating through content court
  • 00:21:30
    documents a Canadian crypto currency
  • 00:21:32
    exchange quadriga cannot access or
  • 00:21:33
    secure the coins I can drill down and
  • 00:21:36
    find out a little bit more about that
  • 00:21:37
    news headline leg list of two items for
  • 00:21:40
    February 2019 for the section link US
  • 00:21:43
    and Canada sort of meta information so
  • 00:21:46
    again this is for the most part really
  • 00:21:48
    nicely structured it's using headings
  • 00:21:50
    and lists and pretty clear link text for
  • 00:21:53
    the most part you know to help me make
  • 00:21:55
    decisions about where I want to explore
  • 00:21:59
    I know one of you had sent in a specific
  • 00:22:03
    request to have me go and explore the
  • 00:22:06
    massive website in the US so I'm going
  • 00:22:10
    to try that one next because I did sneak
  • 00:22:13
    a little bit of a look earlier just to
  • 00:22:15
    get a sense of the home page menu
  • 00:22:18
    application menu alot time for 14 of the
  • 00:22:20
    intercept survey mocks magic mass.gov
  • 00:22:23
    enter leaving menus wwww technology more
  • 00:22:31
    massive website now the person he got in
  • 00:22:35
    touch ahead of the webinar wondered if I
  • 00:22:39
    would be able to find any information
  • 00:22:41
    about claiming an unemployment benefit
  • 00:22:45
    or getting some information about
  • 00:22:48
    unemployment so as I said I sneaked a
  • 00:22:52
    quick look at the homepage just to get a
  • 00:22:54
    sense of it and I came across the
  • 00:22:57
    navigation block main navigation
  • 00:23:00
    that was one heading shortcut jump and I
  • 00:23:03
    got straight to the navigation so so far
  • 00:23:05
    I was feeling quietly confident because
  • 00:23:09
    I want to navigate I'm gonna use the
  • 00:23:10
    down arrow just to explore this bit in
  • 00:23:12
    more detail now listen up I also got a
  • 00:23:15
    list of five items that's really good
  • 00:23:17
    news I know what sort of size and shape
  • 00:23:19
    navigation I'm dealing with living
  • 00:23:21
    button menu collapse put a living button
  • 00:23:24
    menu collapsed now there's lots of
  • 00:23:26
    information in there and the bit that
  • 00:23:28
    confused me with this is that it says
  • 00:23:31
    menu typically when I encounter
  • 00:23:35
    something that tells me it's a menu I
  • 00:23:38
    tend to think it's gonna behave like the
  • 00:23:41
    menu in software that's what the design
  • 00:23:44
    pattern for for a web menu is intended
  • 00:23:47
    to be like if you're not familiar with
  • 00:23:49
    the keyboard interaction for one of
  • 00:23:51
    those it means that you can open the
  • 00:23:53
    menu and then use your arrow keys to
  • 00:23:56
    navigate left or right along the
  • 00:23:58
    horizontal sort of menu options or if
  • 00:24:01
    you want to drill down into one of the
  • 00:24:03
    child level menus for any of them you
  • 00:24:06
    can use the down arrow and keep
  • 00:24:08
    navigating like that so so to here
  • 00:24:11
    button and menu and collapsed didn't
  • 00:24:15
    quite seem to gel in my head so the
  • 00:24:17
    first thing I tried when I was exploring
  • 00:24:19
    earlier was I came back out of that to
  • 00:24:21
    the top of the list a list of five items
  • 00:24:23
    and I tried tabbing on to that so that
  • 00:24:27
    noise you can hear tells me that
  • 00:24:31
    my screen reader has switched itself
  • 00:24:33
    into applications mode this is a very
  • 00:24:37
    peculiar mode that screen readers switch
  • 00:24:41
    into when the design pattern uses
  • 00:24:45
    particular pieces of the Aria
  • 00:24:48
    specification
  • 00:24:52
    so many of you if you've ever tested
  • 00:24:55
    with a screen reader will know that when
  • 00:24:57
    you tap into a form field and you begin
  • 00:24:59
    typing the screen reader will let you
  • 00:25:01
    type the characters into the form field
  • 00:25:04
    and it won't use those characters to
  • 00:25:06
    execute shortcuts so if you had H for
  • 00:25:08
    example you'll see the H key appear in
  • 00:25:10
    the text box you won't suddenly try and
  • 00:25:13
    find your screen readers jumping to the
  • 00:25:14
    next heading applications mode is pretty
  • 00:25:17
    much the same thing except that instead
  • 00:25:20
    of you being able to type into something
  • 00:25:22
    like a form field it says to your screen
  • 00:25:25
    reader don't make any of your shortcuts
  • 00:25:27
    available none of your navigation keys
  • 00:25:30
    none of the typical ways that your user
  • 00:25:33
    would instruct the the software to move
  • 00:25:36
    you around the page instead let the
  • 00:25:39
    browser and the web page take care of
  • 00:25:41
    all the interaction all the navigation
  • 00:25:43
    for you so that noise tells me
  • 00:25:46
    that my screen reader has now given up
  • 00:25:47
    pretty much all its navigational control
  • 00:25:50
    in order to let the website and the
  • 00:25:52
    browser take care of it for me the
  • 00:25:55
    problem I've got is that I didn't hear
  • 00:25:56
    my screen reader say anything after the
  • 00:25:59
    noise he didn't say living
  • 00:26:01
    button or anything of the sort I just
  • 00:26:04
    heard that noise to let me know that the
  • 00:26:07
    mode had changed so curiosity being what
  • 00:26:10
    it is I will keep exploring but I'll use
  • 00:26:11
    the arrow keys because that's what I'd
  • 00:26:13
    expect to be able to do to interact with
  • 00:26:15
    the menu except nothing much is
  • 00:26:19
    happening I'm hitting the the up and
  • 00:26:20
    down the left and right arrow keys but
  • 00:26:23
    from my point of view all is eerily
  • 00:26:26
    silent escape so I can hit the Escape
  • 00:26:29
    key to come back out same page will skip
  • 00:26:32
    the main living button menu back there
  • 00:26:34
    so I'm gonna keep going through the
  • 00:26:36
    navigation just just for interest and
  • 00:26:38
    see if I can find anything about social
  • 00:26:40
    services menu families and children menu
  • 00:26:42
    I've switched it out of the applications
  • 00:26:45
    mode and I've gone back to the previous
  • 00:26:47
    ways of navigating I'm just I was in the
  • 00:26:49
    property menu down ere a transportation
  • 00:26:51
    menu legal and just as many
  • 00:26:53
    public-safety menu energy menu
  • 00:26:55
    environment menu taxes menu unclaimed
  • 00:26:58
    property idle and public records
  • 00:26:59
    floating menu living menu work and
  • 00:27:01
    button manual business resources menu
  • 00:27:03
    work and button menu collapsed
  • 00:27:05
    tell me something about business
  • 00:27:06
    resources many professional licenses and
  • 00:27:08
    unemployment menu unemployment like the
  • 00:27:12
    challenge I was set so I will try
  • 00:27:14
    hitting enter on main region and again
  • 00:27:18
    we heard that noise that tells
  • 00:27:20
    me that my screen reader has has given
  • 00:27:23
    over control of navigation to the
  • 00:27:25
    website heading level 1 welcome to
  • 00:27:29
    Massachusetts Maine region heading level
  • 00:27:32
    1 welcome to Massachusetts what would
  • 00:27:34
    you like to do good question
  • 00:27:37
    okay so I'm not sure what's happened to
  • 00:27:40
    everything there let's query the title
  • 00:27:43
    of the page mass.gov Mozilla Firefox
  • 00:27:45
    Maine region - welcome to Massachusetts
  • 00:27:48
    homepage if I ask the screen reader to
  • 00:27:52
    tell me what the thing am I currently
  • 00:27:53
    focused on what would you like to do
  • 00:27:55
    it's not on the menu where I left it so
  • 00:27:59
    I'm slightly unsure now still around so
  • 00:28:02
    we'll go back to the old heading
  • 00:28:05
    strategy for trying to figure things out
  • 00:28:07
    popular searches heading level 3 further
  • 00:28:11
    down the page then I was so I'll reverse
  • 00:28:14
    order so shift H will take me back
  • 00:28:16
    through the headings in reverse order
  • 00:28:18
    welcome to Massachusetts heading main
  • 00:28:20
    navigation that in level yeah so so for
  • 00:28:23
    some reason trying to access the
  • 00:28:25
    unemployment head of the menu for some
  • 00:28:28
    reason kicked me out of the menu and put
  • 00:28:30
    my focus somewhere on the page welcome
  • 00:28:33
    to Massachusetts heading level 1 I think
  • 00:28:34
    at that point I'm probably gonna call it
  • 00:28:37
    quits I'm trying to find the piece of
  • 00:28:38
    information I'm the important thing
  • 00:28:40
    there is that I wanted to demonstrate
  • 00:28:41
    how that that menu or the thing that
  • 00:28:44
    that said it was a menu actually was
  • 00:28:47
    quite confusing it gave me the wrong cue
  • 00:28:50
    in terms of what my expectations were
  • 00:28:53
    and when I did experiment with sort of
  • 00:28:55
    interacting with it I wasn't entirely
  • 00:28:58
    sure that it was you know doing anything
  • 00:29:00
    expected if I really was needing to find
  • 00:29:04
    information about this right now I would
  • 00:29:06
    probably use a completely different
  • 00:29:08
    tactic and that's just to use the the
  • 00:29:11
    search field to try and find something
  • 00:29:13
    specific on the website relating to my
  • 00:29:15
    query I'm not a patient person that has
  • 00:29:18
    to be
  • 00:29:18
    said and sometimes you just need to
  • 00:29:21
    default to more tried and trusted ways
  • 00:29:25
    of getting to information than patiently
  • 00:29:28
    working through some navigations and
  • 00:29:30
    other bits and pieces over question
  • 00:29:33
    Leonie
  • 00:29:33
    hmm is that what you called the flocking
  • 00:29:37
    noise is that and I assumed it was
  • 00:29:40
    walking and not any is that because
  • 00:29:48
    there's an aria role application there
  • 00:29:51
    or is that one of the things that would
  • 00:29:53
    make it happen yes so so the Aria role
  • 00:29:56
    of application is the the obvious role
  • 00:30:01
    the cause is that but there are several
  • 00:30:03
    others that have the same effect things
  • 00:30:07
    like the role of menu menu bar progress
  • 00:30:10
    bar toolbar tab lists all of those if
  • 00:30:14
    you're using any of those Aria roles
  • 00:30:17
    that's a really clear sign that you need
  • 00:30:19
    to provide the keyboard interaction
  • 00:30:23
    through your JavaScript in able to
  • 00:30:26
    support both screen reader users
  • 00:30:27
    keyboard users and everybody else so
  • 00:30:30
    yeah it's it's almost certainly down to
  • 00:30:31
    an aria role in there that's kicking the
  • 00:30:34
    screen reader into that mode but not
  • 00:30:36
    necessarily then providing the
  • 00:30:37
    supporting keyboard interaction that's
  • 00:30:39
    needed to make it really work gotcha so
  • 00:30:42
    when earlier you you gave me a pat on my
  • 00:30:45
    charming head because I was using HTML
  • 00:30:48
    elements rather than Aria roles
  • 00:30:51
    I suppose it is it generally the case
  • 00:30:55
    that if you can use an HTML element
  • 00:30:58
    rather than bolting on roles you should
  • 00:31:01
    do so yeah absolutely
  • 00:31:04
    HTML wherever and whenever you can there
  • 00:31:08
    are often good cases when that isn't
  • 00:31:11
    possible tabs and panels are a really
  • 00:31:13
    good example if you want to produce
  • 00:31:15
    something like that there are no HTML
  • 00:31:17
    elements that do the job so using the
  • 00:31:20
    Aria is a good approach occasionally it
  • 00:31:25
    can be useful for any of you still
  • 00:31:27
    needing to support an internet explorer
  • 00:31:29
    for example Internet Explorer's
  • 00:31:32
    accessibility
  • 00:31:32
    support for the html5 sectioning
  • 00:31:35
    elements like header and footer is
  • 00:31:38
    pretty weak its support for the Aria
  • 00:31:41
    equivalent roles is much better so there
  • 00:31:44
    are very rare in our cases where often
  • 00:31:48
    even if you are using the the html5
  • 00:31:50
    elements you might find a good case for
  • 00:31:54
    using Aria but yeah
  • 00:31:57
    ie being on the kind of the sunset March
  • 00:32:00
    now that's getting less and less of a
  • 00:32:03
    consideration all the time Todd a quick
  • 00:32:06
    matter question would you mind could you
  • 00:32:09
    turn your screen reader down slightly
  • 00:32:10
    because when you and hear talking
  • 00:32:13
    you're being masked a little bit that's
  • 00:32:17
    a very good point not easily so I will
  • 00:32:20
    endeavor not to or just yell at the top
  • 00:32:26
    I'm gonna mute to myself again while you
  • 00:32:29
    can while you're there please do keep an
  • 00:32:31
    eye open for any questions for me really
  • 00:32:32
    burst I am it's just like why wise
  • 00:32:36
    Bruce's shirt so great is to know it's
  • 00:32:39
    date
  • 00:32:40
    Damian Oz is it just because of the
  • 00:32:42
    keyboard interactions to map that you
  • 00:32:45
    are giving the advice to not use aria is
  • 00:32:48
    there any other impact when you're using
  • 00:32:50
    Aria roles and Aria
  • 00:32:56
    using Aria is a bit like using spices
  • 00:33:00
    and seasoning when you're cooking you
  • 00:33:03
    used lightly and well it's extremely
  • 00:33:06
    effective overused and overdone it can
  • 00:33:09
    often cause more problems than the ones
  • 00:33:11
    you're trying to solve
  • 00:33:14
    HTML gives you a whole bunch of
  • 00:33:16
    accessibility for free it's the first
  • 00:33:18
    thing so as soon as you start adding
  • 00:33:20
    Aria into it particularly where you
  • 00:33:22
    don't need to you're starting to add
  • 00:33:25
    moving parts to your code and the more
  • 00:33:27
    moving parts you've got the more fragile
  • 00:33:29
    it becomes and it's a death of a
  • 00:33:31
    thousand paper cuts kind of a situation
  • 00:33:33
    you know a little bit of Aria here and
  • 00:33:35
    there is not going to cause you major
  • 00:33:37
    fragility in your code but I have seen
  • 00:33:40
    websites that were actually perfectly
  • 00:33:42
    accessible and then someone very
  • 00:33:44
    helpfully added a lot of Aria on top of
  • 00:33:46
    it and in doing so managed to make them
  • 00:33:48
    completely inaccessible so it's just
  • 00:33:51
    keeping things simple it's just a good
  • 00:33:53
    coding practice irrespective of
  • 00:33:55
    accessibility so I think there's there's
  • 00:33:57
    an element of that involved and then
  • 00:34:00
    just being very very sure that aria is
  • 00:34:02
    invisible so when you're writing code
  • 00:34:04
    unless you're testing it with a screen
  • 00:34:06
    reader quite a lot can be happening
  • 00:34:09
    without you being aware of it so if you
  • 00:34:11
    are using Aria you really do need to
  • 00:34:12
    test it with a screen reader because
  • 00:34:14
    quite often they'll be unintended
  • 00:34:16
    consequences that you're just not aware
  • 00:34:18
    of from a development point of view that
  • 00:34:21
    mirrors the advice that I used to give
  • 00:34:24
    my good name Ian when I was consulting
  • 00:34:27
    with them and I'd say if you're going to
  • 00:34:29
    use Aria to add keyboard accessibility
  • 00:34:34
    to things that don't really have an ATL
  • 00:34:37
    element you must test it with the
  • 00:34:39
    keyboard to make sure it works because
  • 00:34:42
    otherwise you just don't know so that
  • 00:34:44
    that's one thing that's probably worth
  • 00:34:47
    just pointing out is the Aria in and of
  • 00:34:49
    itself is a very screenreader specific
  • 00:34:52
    technology a tiny amount of it is
  • 00:34:55
    recognized by Dragon NaturallySpeaking
  • 00:34:57
    but but other than that it's all about
  • 00:34:59
    screen reader accessibility and Aria
  • 00:35:02
    itself doesn't impose any kind of
  • 00:35:04
    functionality at all this is why the
  • 00:35:05
    problem with the menus I was talking
  • 00:35:07
    about earlier so Aria just
  • 00:35:10
    changes the way something's presented in
  • 00:35:12
    the accessibility tree that the browser
  • 00:35:14
    creates all the functionality that needs
  • 00:35:16
    to be accorded the design pattern that's
  • 00:35:19
    down to us as developers to put into the
  • 00:35:20
    JavaScript so yeah you've got to make
  • 00:35:23
    sure that if you're using Aria you back
  • 00:35:24
    it up with the right keyboard
  • 00:35:25
    interaction in your script and yeah
  • 00:35:27
    exactly as you said that that you test
  • 00:35:29
    it pretty thoroughly keyboard screen
  • 00:35:31
    reader as well it's probably worth
  • 00:35:33
    saying at this point to everybody that
  • 00:35:35
    you are what I would consider an
  • 00:35:39
    advanced screen reader user you've been
  • 00:35:41
    using for donkey's years and and you're
  • 00:35:43
    a web developer too so maybe somebody
  • 00:35:46
    who's newly lost their vision is going
  • 00:35:49
    to be a lot less adept at navigating the
  • 00:35:52
    site's and you are simply because you
  • 00:35:54
    have more experience and probably more
  • 00:35:57
    idea of what's going on under the hood
  • 00:35:59
    because it's your you know it's your
  • 00:36:00
    training and your job yeah absolutely I
  • 00:36:03
    mean although all I have really used
  • 00:36:05
    today are some very simple techniques
  • 00:36:08
    that many screenreader users will adopt
  • 00:36:12
    there are some people who never get past
  • 00:36:14
    just using the down arrow key to explore
  • 00:36:16
    the page and read it actively like a
  • 00:36:18
    text document there's a thesis just
  • 00:36:22
    published by vassilis vanaf Emmett here
  • 00:36:26
    from amsterdam's University of Applied
  • 00:36:28
    Sciences in which he has done a lot of
  • 00:36:32
    research with screenreader users amongst
  • 00:36:35
    other people and he talks to one person
  • 00:36:38
    who actually finds all the information
  • 00:36:40
    about headings and lists clutter they
  • 00:36:43
    really hate it they would like their
  • 00:36:44
    screen reader not to tell them about all
  • 00:36:47
    these you know lovely features that the
  • 00:36:49
    web page has got because they just find
  • 00:36:50
    it noisy and distracting so yes you
  • 00:36:54
    shouldn't take me as a typical user
  • 00:36:57
    there probably is no such thing as a
  • 00:36:59
    typical user of course but it's the same
  • 00:37:02
    with browsers and I mean some people
  • 00:37:04
    love the minimal UI of Chrome or the
  • 00:37:08
    people absolutely adored the endless
  • 00:37:12
    bells and whistles that we had in well
  • 00:37:16
    there's no browser user I've just
  • 00:37:19
    noticed some more questions come in and
  • 00:37:21
    they're coming in
  • 00:37:22
    they can fastly early so I if it's okay
  • 00:37:25
    with you I'll ask them now
  • 00:37:28
    are there any other screen readers that
  • 00:37:30
    you recommend other than jaws for
  • 00:37:32
    testing yes as many as you can possibly
  • 00:37:38
    get your hands on and have time to test
  • 00:37:40
    so actually on Windows
  • 00:37:43
    I recommend testing with NVDA for the
  • 00:37:47
    moment it's an excellent open source
  • 00:37:50
    screen reader and from a budget point of
  • 00:37:55
    view that makes it a more effective tool
  • 00:37:59
    in your arsenal
  • 00:38:03
    I won't make a side-by-side comparison
  • 00:38:04
    between it and yours but they are pretty
  • 00:38:07
    comparable in terms of you know screen
  • 00:38:10
    reader experience so testing with NVDA
  • 00:38:13
    on Windows is a good combination if
  • 00:38:17
    you're testing on a Mac then voice over
  • 00:38:19
    is your only choice
  • 00:38:20
    it's the integrated screen reader on Mac
  • 00:38:22
    OS and iOS and it's the only screen
  • 00:38:26
    reader available on those particular
  • 00:38:28
    platforms if you're testing on Android
  • 00:38:32
    then talkback is the screen reader of
  • 00:38:34
    choice cycling back to Windows narrator
  • 00:38:38
    is the integrated screen reader in
  • 00:38:41
    Windows for many years it was it was the
  • 00:38:45
    screen reader that almost was
  • 00:38:47
    it was lacked in features for many years
  • 00:38:50
    it was pretty terrible but actually in
  • 00:38:52
    the past two years pretty much the
  • 00:38:55
    advent of Windows 10 narrator has
  • 00:38:58
    actually become a fully-fledged screen
  • 00:39:01
    reader that's actually one I do every
  • 00:39:03
    now and again when I need to get around
  • 00:39:06
    some bits of Windows 10 that neither
  • 00:39:07
    jaws nor NVDA get to the one thing I
  • 00:39:11
    will point out from the question about
  • 00:39:13
    jaws another screen readers to test on
  • 00:39:15
    Windows is that jaws still has the
  • 00:39:17
    market share by a reasonably distinct
  • 00:39:20
    margin so sooner or later it is always
  • 00:39:23
    worth testing with the technologies that
  • 00:39:25
    are likely to encompass the most of your
  • 00:39:28
    screen reader audience but yeah trying
  • 00:39:33
    to get in as many variations on a flavor
  • 00:39:35
    a screen reader and browser as you can
  • 00:39:37
    is a good idea and follow-up to that mic
  • 00:39:41
    asks what's the best way for sighted
  • 00:39:43
    developers to test with a screen reader
  • 00:39:45
    it seems even for a well-intentioned
  • 00:39:48
    developer it's too easy to cheat as
  • 00:39:50
    you've got the context of the visual
  • 00:39:52
    page I mean I just I've just always said
  • 00:39:54
    to somebody get somebody else who's kind
  • 00:39:57
    of on your team and turn the monitor off
  • 00:40:00
    and unplug the mouse yep absolutely
  • 00:40:03
    you know just stick a tea towel or a
  • 00:40:05
    he's a paper or something over your
  • 00:40:07
    laptop screen or yep unplug it if you've
  • 00:40:09
    got a desktop monitor one feature I love
  • 00:40:12
    about a narrator on Windows 10 is that
  • 00:40:15
    it has a dev mode
  • 00:40:17
    so if you turn narrator on there is a
  • 00:40:21
    keystroke which completely escapes me
  • 00:40:23
    for the moment which will black out
  • 00:40:25
    everything on the screen except for the
  • 00:40:28
    one piece of content that the screen
  • 00:40:29
    reader is currently focused on so it
  • 00:40:32
    creates a sort of visual representation
  • 00:40:34
    so so you can't cheat yeah quite as well
  • 00:40:37
    so that's a great feature I think that's
  • 00:40:40
    that's incredibly useful from a
  • 00:40:41
    development point of view interesting
  • 00:40:44
    and gene or Jean Caplansky I will pass
  • 00:40:48
    your message on to Leonie after this but
  • 00:40:53
    in a few weeks time we're going to
  • 00:40:56
    release this video on YouTube for
  • 00:40:59
    everybody to watch because I think it's
  • 00:41:01
    really important for the wider deaf
  • 00:41:03
    community to understand what Lyon is
  • 00:41:05
    showing so the mass.gov people will be
  • 00:41:09
    able to watch it there one new one just
  • 00:41:15
    popped in why is your shirt so great
  • 00:41:17
    Bruce I am mainly using it wrote a thing
  • 00:41:26
    on voiceover do you know of it mm-hmm
  • 00:41:29
    somebody said I'm mainly using it
  • 00:41:31
    because it helps me with the page of my
  • 00:41:33
    dyslexia and ADHD for long pieces of
  • 00:41:35
    content but to visually impaired youth
  • 00:41:38
    people use this yes yeah absolutely
  • 00:41:44
    so for anyone who's not familiar with it
  • 00:41:45
    on Apple devices you have something
  • 00:41:48
    called the the rotor so-called because
  • 00:41:51
    on its touchscreen devices you put a
  • 00:41:55
    couple of fingers on the screen and you
  • 00:41:56
    rotate them around as if you were
  • 00:41:57
    twisting a wheel and what it does is it
  • 00:42:02
    calls up a kind of sort of tabs style
  • 00:42:08
    display and you can choose you know one
  • 00:42:11
    tab will have all the headings listed on
  • 00:42:13
    the page one tab will show the links one
  • 00:42:16
    tab will show all the form fields and
  • 00:42:18
    then you can use the up and down arrows
  • 00:42:19
    to just move very quickly to you know
  • 00:42:23
    the chosen link or the chosen form field
  • 00:42:25
    that you want and all screen readers
  • 00:42:27
    have them surfers show you know
  • 00:42:30
    see if I'm linked list dialog linked
  • 00:42:34
    list new renew your vehicle registration
  • 00:42:35
    six of 37 so they're just called up a
  • 00:42:39
    list now this just shows me all the
  • 00:42:40
    links of the page it said I'm on link 6
  • 00:42:43
    of 37 so I can just use the arrow key to
  • 00:42:46
    move through this list apply for SNAP
  • 00:42:50
    benefits food stamps 7 of 37 renew your
  • 00:42:52
    drivers license 8'o 37 so all screen
  • 00:42:56
    readers on all platforms have some
  • 00:42:59
    variation on a theme of this capability
  • 00:43:00
    give me a list of all the links give me
  • 00:43:03
    a list of all the headings on the page
  • 00:43:05
    and yes I certainly do use them myself
  • 00:43:08
    and I'm aware of the screen reader users
  • 00:43:10
    do use them
  • 00:43:11
    a quick note on the subject of the links
  • 00:43:14
    dialog both in the the Apple rota and
  • 00:43:16
    another mechanisms like this this is one
  • 00:43:19
    of the reasons why accessibility people
  • 00:43:20
    go on and on about link text needing to
  • 00:43:23
    make sense when it's taken out of the
  • 00:43:25
    context of the page if you took this
  • 00:43:28
    page now and it was 16 applying our
  • 00:43:30
    links or you know read more links it
  • 00:43:34
    would be next to impossible to correctly
  • 00:43:36
    identify where on earth you'd be going
  • 00:43:37
    when you chose to activate a link so
  • 00:43:40
    this is one of the really clear use
  • 00:43:41
    cases for making link text as as useful
  • 00:43:44
    and as independent in its own right as
  • 00:43:47
    it can be it occurs to me I when you
  • 00:43:51
    were going through my sites maybe you're
  • 00:43:54
    lonely for the first time ever although
  • 00:43:56
    I am always scrupulous about not saying
  • 00:43:59
    click here click here clicking my
  • 00:44:02
    multiple use of the words reading look
  • 00:44:05
    for actually different weeks worth of
  • 00:44:08
    reading lists probably fails for the
  • 00:44:12
    same reason that if you were just
  • 00:44:13
    looking at you know if you're tabbing
  • 00:44:15
    through and there's just 15 different
  • 00:44:17
    reading lists that's not terribly useful
  • 00:44:19
    yep yeah so maybe chucking in the date
  • 00:44:22
    or something into the heading text or
  • 00:44:25
    numbering them or some other thing would
  • 00:44:27
    make that a touch more usable for sure I
  • 00:44:29
    shall do it's good anyway you didn't
  • 00:44:32
    come out of punch me okay I'll shut up
  • 00:44:34
    now and let you carry on because I'm
  • 00:44:36
    never taking lots of time alright I'm
  • 00:44:40
    going to take a look
  • 00:44:41
    at the smashing my website seems I'll be
  • 00:44:44
    menu application type the inter survey
  • 00:44:47
    Smashing Magazine enter leaving menus
  • 00:44:55
    www.nasa.gov/station - Smashing Magazine
  • 00:45:12
    a useful topic because this is very much
  • 00:45:16
    you know part of what we've been talking
  • 00:45:18
    about accessibility API is our the way
  • 00:45:20
    that the screen reader asks the browser
  • 00:45:22
    for information the thing I wanted to
  • 00:45:25
    show you on this page I hope the
  • 00:45:29
    Smashing Magazine team will forgive me
  • 00:45:31
    is sometimes the visual display of
  • 00:45:35
    content makes complete sense and is very
  • 00:45:38
    convenient and easy but the way it's
  • 00:45:42
    presented to a screen reader user in the
  • 00:45:45
    order of the code underneath isn't quite
  • 00:45:46
    as convenient so I'm going to hit a
  • 00:45:49
    shortcut that will take me straight to
  • 00:45:51
    the number one heading on the page
  • 00:45:54
    accessibility o P is a key web
  • 00:45:56
    accessibility heading level one and this
  • 00:45:58
    is lovely that's a nice piece of design
  • 00:46:00
    makes navigation very easy what I'm
  • 00:46:02
    gonna do now is just let the screen
  • 00:46:04
    reader read down the page there's a
  • 00:46:07
    command where you can just tell it okay
  • 00:46:08
    just start reading and keep going until
  • 00:46:10
    I tell you to stop because it's quite
  • 00:46:13
    remarkable all the content that has to
  • 00:46:16
    be read through before getting to the
  • 00:46:19
    actual bones of the article heading
  • 00:46:22
    level one accessibility AP is 18 web
  • 00:46:24
    accessibility list of three items 12 min
  • 00:46:26
    read blink code and link user experience
  • 00:46:28
    link accessibility link API share on
  • 00:46:30
    link Twitter or LinkedIn list end link a
  • 00:46:32
    post cat sign up for our smashing
  • 00:46:34
    newsletter heading level 2 Smashing
  • 00:46:35
    newsletter upgrade your inbox and get
  • 00:46:37
    our editors picks twice a month your
  • 00:46:38
    email clickable required invalid entry
  • 00:46:40
    edit subscribe write works arrow button
  • 00:46:42
    our friends and supporters downwards
  • 00:46:43
    arrow list of one items link graphically
  • 00:46:45
    1 billion 531 million two hundred ninety
  • 00:46:47
    two thousand three hundred eighty two
  • 00:46:49
    slash Northwestern opt SSR FTX
  • 00:46:51
    lynn turner master's degree online list
  • 00:46:53
    and quick summary right works arrow with
  • 00:46:55
    accessibility is about people successful
  • 00:46:57
    web accessibility is about anticipating
  • 00:46:59
    the different needs of all sorts of
  • 00:47:00
    people understanding your fellow web
  • 00:47:01
    users in the different ways they consume
  • 00:47:03
    information empathizing with them and
  • 00:47:05
    their sense of what is convenient and
  • 00:47:06
    what frustratingly unnecessary barriers
  • 00:47:08
    you could help them to avoid armed with
  • 00:47:09
    this understanding accessibility becomes
  • 00:47:11
    a cold our technical challenge a firm
  • 00:47:13
    grasp of the technology is paramount to
  • 00:47:15
    making informed decisions about
  • 00:47:16
    accessible design
  • 00:47:17
    how do assistive technologies present a
  • 00:47:19
    web application to make it accessible
  • 00:47:21
    for their users where do they get the
  • 00:47:22
    information they need one of the keys is
  • 00:47:24
    a technology known as the accessibility
  • 00:47:25
    accessibility so I'm gonna stop it there
  • 00:47:28
    and just head back up to that first
  • 00:47:31
    accessibility
  • 00:47:34
    yeah here's the web star get the
  • 00:47:47
    structure or the typical format of pages
  • 00:47:50
    there are techniques you can use to jump
  • 00:47:52
    over it but visually of course you just
  • 00:47:55
    sort of gloss over it you glance through
  • 00:47:57
    it and you set to reading the article
  • 00:47:59
    but from a screen reader users point of
  • 00:48:02
    view that's not quite so easy or
  • 00:48:03
    convenient so we had a lot of content to
  • 00:48:06
    wade through with the free items
  • 00:48:08
    weldment read 12 minute read I'm most
  • 00:48:11
    curious about these not just on smashing
  • 00:48:13
    a bit but any article that has a reading
  • 00:48:15
    rate on it I was feel slightly under
  • 00:48:17
    pressure
  • 00:48:18
    I'll show you before we wrap up how fast
  • 00:48:21
    I usually listen to my screen reader at
  • 00:48:23
    this is very slow for me
  • 00:48:26
    but even so twelve minutes to read this
  • 00:48:29
    article I'm always curious it who's
  • 00:48:32
    drawing so then I had to get through
  • 00:48:36
    some some links about the categories
  • 00:48:38
    link user experience link accessibility
  • 00:48:41
    link API
  • 00:48:42
    girag sharing links like Twitter or
  • 00:48:46
    LinkedIn listed link a post cat sign up
  • 00:48:49
    for our Smashing newsletter an
  • 00:48:52
    invitation sign up for the newsletter
  • 00:48:54
    blegh
  • 00:48:55
    heading level to Smashing newsletter
  • 00:48:57
    blend upgrade your inbox and get our
  • 00:48:59
    editors picks twice a month blend your
  • 00:49:01
    email clickable required invalid entry
  • 00:49:03
    edit something interesting there about
  • 00:49:06
    the form field to put in your email it
  • 00:49:08
    says it's invalid although there is no
  • 00:49:10
    information in the the field yet that's
  • 00:49:15
    a problem with the way some browsers
  • 00:49:17
    interpret the presence of the required
  • 00:49:19
    field when there's no information in the
  • 00:49:22
    field they in the accessibility layer
  • 00:49:25
    and the accessibility tree expose it as
  • 00:49:27
    having an error in it because by
  • 00:49:30
    definition if something is required and
  • 00:49:31
    it has no information in it it is an
  • 00:49:34
    error but it's not a particularly
  • 00:49:36
    user-friendly way of presenting it let's
  • 00:49:39
    go on subscribe write words arrow button
  • 00:49:42
    our friends and supporters downwards
  • 00:49:44
    arrow and there's some information about
  • 00:49:45
    friends and supporters
  • 00:49:47
    list of one items linked graphically 1
  • 00:49:49
    billion 500 31 million who has 19382 /
  • 00:49:53
    northwestern up as our FDA graphic that
  • 00:49:56
    has no alternative text which I'm
  • 00:49:59
    guessing is going to be a logo or
  • 00:50:01
    something for that particular supporter
  • 00:50:04
    but that's very typical of the
  • 00:50:06
    experience you get if images don't have
  • 00:50:08
    the proper alt text provided you just
  • 00:50:10
    get some information about the file name
  • 00:50:12
    or path to the image if you listen to me
  • 00:50:17
    yard-line sorry say again Bruce so
  • 00:50:20
    listen to this that's me
  • 00:50:22
    actually punching the person with
  • 00:50:35
    summary
  • 00:50:35
    Darryl with web accessibility is about
  • 00:50:37
    people successful I get to the quick
  • 00:50:39
    summary which is really useful except I
  • 00:50:41
    left it reading when I did this a moment
  • 00:50:44
    ago because it told me there was a quick
  • 00:50:47
    summary but then I wasn't quite sure
  • 00:50:48
    where the quick summary ended if it had
  • 00:50:50
    ended and if it had not ended so I'm
  • 00:50:53
    just gonna very quickly just hit the
  • 00:50:55
    down arrow key a few times and see if I
  • 00:50:57
    can figure that out doing it this way
  • 00:50:59
    your fellow web users is a different
  • 00:51:01
    unnecessary bear of a technology and
  • 00:51:03
    accessible for their use application
  • 00:51:04
    program blank web accessibility is about
  • 00:51:07
    people successful web accessibility is
  • 00:51:09
    about anticipating the different so I'm
  • 00:51:10
    gonna guess that that's the first line
  • 00:51:12
    of the actual article so we've exited
  • 00:51:15
    the quick summary but I just wanted to
  • 00:51:17
    illustrate that even on a site like this
  • 00:51:19
    which actually has a lot of really good
  • 00:51:20
    features for accessibility I read a lot
  • 00:51:23
    of content on the Smashing magnet there
  • 00:51:26
    are some things that unless you really
  • 00:51:29
    think about the experience of using it
  • 00:51:31
    with a screen reader probably just
  • 00:51:32
    wouldn't occur to you or maybe even
  • 00:51:33
    didn't you know crop up during usability
  • 00:51:36
    testing was just that all that
  • 00:51:38
    information about sharing and you know
  • 00:51:41
    come and join our newsletter and and you
  • 00:51:44
    know let's give a shout out to some of
  • 00:51:46
    the great people that support the work
  • 00:51:48
    that Smashing mag does it all adds to to
  • 00:51:51
    a lot of clutter at the top of the page
  • 00:51:53
    before we can really get to the thing
  • 00:51:54
    you actually want to be doing which is
  • 00:51:56
    reading the articles so this is where
  • 00:51:58
    accessibility from a screen reading
  • 00:52:00
    point of view Falls more and
  • 00:52:01
    usability there's nothing really
  • 00:52:03
    stopping me accessing the content here
  • 00:52:05
    but there is some stuff that maybe makes
  • 00:52:08
    it a little bit less convenient than I
  • 00:52:11
    might choose to make it I'm just gonna
  • 00:52:15
    quick time check
  • 00:52:16
    I'm Bruce I'm sure you'll shout at me if
  • 00:52:18
    we're seventeen elite do we need to wrap
  • 00:52:21
    some time soon Bruce I know we started
  • 00:52:24
    late but ten minutes we can if it's okay
  • 00:52:28
    with you I'd love to have you on again
  • 00:52:32
    examples that you still have because I'm
  • 00:52:36
    pretty sure that lots of our people will
  • 00:52:40
    have things I'd like you to look at
  • 00:52:42
    let's give it another ten okay no
  • 00:52:45
    problem in that that's okay with you of
  • 00:52:46
    course it is I know the pubs open now
  • 00:52:52
    okay what I'm going to do now is head
  • 00:52:56
    over to my personal blog site because
  • 00:52:59
    there's a couple of things there I can
  • 00:53:00
    show you
  • 00:53:01
    and although accessibility ap is a key
  • 00:53:04
    here you may enter web accessibility is
  • 00:53:07
    about people successful web
  • 00:53:08
    accessibility is about anticipated
  • 00:53:10
    tickle Amy Watson ed - on technology
  • 00:53:13
    food and life with the digital age
  • 00:53:14
    Mozilla Firefox came so what I'm going
  • 00:53:18
    to do now and apologies if this makes
  • 00:53:21
    everyone slightly sick is I'm going to
  • 00:53:23
    just move my focus straight down region
  • 00:53:29
    Linden L Watson link and I'm gonna go
  • 00:53:32
    backwards up the page and I'm going to
  • 00:53:34
    use another shortcut beef for buttons
  • 00:53:36
    this time I'm going backwards so shift B
  • 00:53:39
    Darkly toggle button and that takes me
  • 00:53:43
    to the first of two buttons that let
  • 00:53:46
    someone change the white on black to
  • 00:53:49
    black on white so vice versa
  • 00:53:51
    and you might have heard when the screen
  • 00:53:54
    reader landed on it it said it was a
  • 00:53:55
    toggle button if I go to the one before
  • 00:53:59
    it on the page like the toggle button
  • 00:54:02
    pressed it's a toggle button pressed
  • 00:54:04
    this is a good use of Aria because the
  • 00:54:07
    equivalent thing doesn't exist in HTML
  • 00:54:09
    and that's to indicate when a button is
  • 00:54:12
    pressed
  • 00:54:13
    aria-pressed true is what's causing this
  • 00:54:17
    button to tell me that it's already been
  • 00:54:19
    pressed and that's a very useful thing
  • 00:54:21
    to do
  • 00:54:22
    toggle buttons are really hard play
  • 00:54:25
    pause buttons the notorious example I
  • 00:54:28
    hit play and then the button appears to
  • 00:54:32
    be pressed and then something starts
  • 00:54:34
    playing but then the label changes to
  • 00:54:36
    pause and I'm never quite sure whether
  • 00:54:37
    the pause button means if I hit it it'll
  • 00:54:39
    pause or whether it's already paused and
  • 00:54:41
    if I hit it look about to play something
  • 00:54:44
    like aria-pressed is a really good way
  • 00:54:45
    of just saying keep the label the same
  • 00:54:47
    but indicating along with the visual
  • 00:54:49
    design that this thing is is pressed or
  • 00:54:53
    not pressed so that's one thing that's
  • 00:54:56
    very useful where Aria does something
  • 00:55:00
    HTML can't if I keep going back up
  • 00:55:02
    through the buttons on the page
  • 00:55:04
    conference button collapse so there
  • 00:55:07
    we've got a conferences button collapsed
  • 00:55:09
    and this is another useful thing at the
  • 00:55:12
    Aria expanded attribute will let you say
  • 00:55:17
    whether something is expanded or
  • 00:55:19
    collapsed on the page if you want a good
  • 00:55:22
    HTML alternative details and summary the
  • 00:55:25
    native HTML ways to create something
  • 00:55:28
    that discloses content with the
  • 00:55:31
    exception of edge which doesn't support
  • 00:55:33
    those elements at all in any way shape
  • 00:55:34
    or form never mind
  • 00:55:35
    excessively mmm all the other browsers
  • 00:55:38
    actually have really good accessibility
  • 00:55:40
    support for details in summary so
  • 00:55:42
    they're a good HTML way to create a
  • 00:55:46
    disclosure widget but if you can't do
  • 00:55:48
    that or you've got a different situation
  • 00:55:50
    aria-expanded is a good way and if I hit
  • 00:55:53
    enter on that button enter navigation
  • 00:55:56
    region conferences but use jaws P + Alt
  • 00:55:59
    + M to move the control element expanded
  • 00:56:01
    alert from Scott groover the halls
  • 00:56:02
    analyst fantastic demo search box edit
  • 00:56:05
    expanded information conferences button
  • 00:56:11
    expanded new Steinberg allow just
  • 00:56:12
    collapse it again and it tells me that
  • 00:56:14
    that's collapsed something else I'll
  • 00:56:18
    quickly show you and I'm going to zip my
  • 00:56:20
    focus back up to the very top of the
  • 00:56:22
    page technically what I'm going to use
  • 00:56:26
    the the
  • 00:56:27
    regions to move to the main area graphic
  • 00:56:30
    technique a banner made region and the
  • 00:56:33
    way I've put things together on my blog
  • 00:56:36
    is I've used article elements to
  • 00:56:39
    represent the the different headlines
  • 00:56:42
    and short texts about each blog post
  • 00:56:46
    what I've done here is something again
  • 00:56:48
    that you can't do with HTML I've used
  • 00:56:52
    the area labeled by attribute to tie the
  • 00:56:56
    article elements to the text that is
  • 00:56:59
    shown in the heading for the particular
  • 00:57:01
    blog post so as I move through the page
  • 00:57:04
    using the the region shortcut that we
  • 00:57:06
    started off exploring right back at the
  • 00:57:08
    very beginning of the webinar we should
  • 00:57:10
    here heading level two limiting the area
  • 00:57:13
    relay description a trivial matter
  • 00:57:14
    that's read a whole bunch of information
  • 00:57:17
    it ties it all into one it's reading the
  • 00:57:19
    article the heading and the text inside
  • 00:57:22
    the heading all as a single unit but I
  • 00:57:24
    can navigate by that and it reads all
  • 00:57:27
    the information in one go so it's just
  • 00:57:30
    another way to navigate through the page
  • 00:57:32
    by the article elements inside the main
  • 00:57:36
    content area and still hear the heading
  • 00:57:39
    text read out so I don't just hear
  • 00:57:40
    article article article I'm hearing
  • 00:57:43
    something that makes them more context
  • 00:57:47
    relevant to me as I keep navigating
  • 00:57:50
    through okay let's see where else can we
  • 00:57:56
    go and explore what else I saved in my
  • 00:58:02
    bookmarks I'll be menu at with type form
  • 00:58:05
    for TP intercept 1314 site enter leaving
  • 00:58:08
    menus using the aureola description
  • 00:58:10
    attribute heading level tool in the
  • 00:58:11
    intercept Mozilla Firefox lists one
  • 00:58:13
    region 11 headings and 46 links via so I
  • 00:58:16
    think this one was sent in as a
  • 00:58:18
    suggestion by someone the intercept news
  • 00:58:22
    site this is not a site I am familiar
  • 00:58:24
    with at all
  • 00:58:26
    so again I will stick by the the trusty
  • 00:58:30
    standbys of using the headings to
  • 00:58:32
    navigate I can find my keys Louisiana
  • 00:58:38
    test the new Supreme Court and abortion
  • 00:58:39
    heading level one link because that's a
  • 00:58:44
    heading one I would almost expect that
  • 00:58:46
    to be the primary news article the
  • 00:58:49
    primary content of the page but knowing
  • 00:58:51
    this is a new site and I've gone to the
  • 00:58:53
    home page of the new site I'm suspecting
  • 00:58:55
    this is not the case so I'll keep
  • 00:58:57
    exploring headings top stories heading
  • 00:58:59
    level to top story is heading to so that
  • 00:59:02
    suggests the top story is a slightly
  • 00:59:04
    less important than the headline I just
  • 00:59:07
    read that was a heading level one but I
  • 00:59:08
    keep going top Nancy Pelosi a privately
  • 00:59:11
    tells insurance executives not to worry
  • 00:59:12
    about Democrats pushing Medicare for all
  • 00:59:14
    heading level four link heading for so
  • 00:59:17
    now I'm completely confused maybe that's
  • 00:59:18
    a top story but the top story heading
  • 00:59:21
    said it was a heading to and this is a
  • 00:59:22
    heading for so no maybe maybe not Google
  • 00:59:26
    hired gig economy workers to improve
  • 00:59:27
    artificial intelligence and
  • 00:59:29
    controversial drone targeting project
  • 00:59:30
    heading level four link okay so that's
  • 00:59:33
    another heading for and what I'm
  • 00:59:34
    starting to suspect here is is that
  • 00:59:36
    headings have been used as much of their
  • 00:59:38
    visual appearance as they have for their
  • 00:59:40
    actual semantic value to to the likes of
  • 00:59:43
    of me and other screenreader users but
  • 00:59:47
    it's a good illustration as it turns out
  • 00:59:48
    of why it's pretty critically important
  • 00:59:52
    to get heading structure right it really
  • 00:59:54
    is invaluable to screen reader users and
  • 00:59:57
    when it goes wrong it's very very hard
  • 00:59:58
    to to unpick and make any sense of the
  • 01:00:02
    o'meara nominee or at least Brett
  • 01:00:04
    Kavanaugh has agency that's been
  • 01:00:05
    stalling sexual-harassment guidance
  • 01:00:07
    heading level four link tabbing through
  • 01:00:13
    the page now is a different way of
  • 01:00:14
    exploring and see if that throws up
  • 01:00:16
    anything of interest Hill is Turkey
  • 01:00:19
    March first the town of Kilis has seen
  • 01:00:21
    through the window of the muqam but
  • 01:00:22
    every mosque on March 1st 2016 and kill
  • 01:00:24
    its turkey kill is a city located just
  • 01:00:26
    10 km from reading one thing you will
  • 01:00:30
    discover if you spend any time with
  • 01:00:32
    screen reader user is that we don't stop
  • 01:00:35
    and listen to everything it's one of the
  • 01:00:38
    strange
  • 01:00:39
    things I often find people believe or
  • 01:00:43
    assume that a screen reader will listen
  • 01:00:46
    to everything that is presented to them
  • 01:00:50
    most of us me in particular anyway are
  • 01:00:53
    incredibly impatient and we won't sit
  • 01:00:55
    and listen to everything we'll listen to
  • 01:00:57
    the first one or two syllables of a line
  • 01:00:59
    and if it doesn't seem to be heading in
  • 01:01:00
    the right direction to be the thing that
  • 01:01:02
    we're interested in we will move on
  • 01:01:04
    pretty rapidly it's kind of the
  • 01:01:05
    equivalent of when you're skimming
  • 01:01:07
    through content you don't really read it
  • 01:01:09
    properly you may be taking the shape of
  • 01:01:11
    the words or the first few words in a
  • 01:01:14
    sentence just enough to give you a
  • 01:01:15
    flavor of whether it's it's looking
  • 01:01:18
    likely or not and then if it isn't you
  • 01:01:20
    move on and so on so screen readers are
  • 01:01:22
    very much the same so yeah we don't
  • 01:01:26
    often hang around and listen to
  • 01:01:28
    everything see all our might work zero
  • 01:01:30
    link epilogue unanswered questions
  • 01:01:33
    listen is a time for Kamala Harris to
  • 01:01:35
    murder will link calmly rapid some
  • 01:01:44
    things with screen readers it has to be
  • 01:01:46
    said I'll just often unpronounceable
  • 01:01:48
    what you can do actually is with screen
  • 01:01:52
    readers is not only just read content in
  • 01:01:56
    whole discrete chunks like words or
  • 01:01:58
    links or headings you can actually read
  • 01:02:00
    by character so if I use the left and
  • 01:02:02
    right arrows now if I hit the right
  • 01:02:05
    arrow H E I n t e r c e p t period c om
  • 01:02:12
    i could just read the URL by character
  • 01:02:17
    and this particular screen reader if I
  • 01:02:19
    stay paused on a particular character
  • 01:02:20
    will also give me the phonetic alphabet
  • 01:02:23
    version of the letter as well which is
  • 01:02:25
    the strange but often quite useful we
  • 01:02:29
    can also navigate content by words so if
  • 01:02:32
    I hold down a modifier key and use the
  • 01:02:34
    right arrow join our newsletter original
  • 01:02:37
    recording I can start moving by it by
  • 01:02:40
    word as well and screen readers have
  • 01:02:42
    hundreds of these commands you can move
  • 01:02:45
    by character by sentence paragraph word
  • 01:02:49
    almost every HTML element that exists as
  • 01:02:53
    got a shortcut key so whether it's
  • 01:02:56
    tables links lists buttons you know
  • 01:03:01
    there are shortcuts that will will let
  • 01:03:02
    you navigate around them
  • 01:03:08
    okay let's see if we've got a couple of
  • 01:03:12
    minutes I'm just kind of having
  • 01:03:13
    mentioned tables please do show you an
  • 01:03:18
    example if I can think of where I can
  • 01:03:20
    find the intercept Mozilla Oh CA do .
  • 01:03:25
    comm / intercept comlink graphic picado
  • 01:03:28
    the online supermarket Mozilla Firefox
  • 01:03:29
    an award for something and save the
  • 01:03:31
    market website
  • 01:03:32
    go ahead boxes one frame buy the product
  • 01:03:37
    edit enter the product information on
  • 01:03:42
    the side of it I was gonna say Prosecco
  • 01:03:48
    Mozilla Firefox login with zero pounds
  • 01:03:56
    most electable aryaka essential
  • 01:03:59
    laborious essential way process 470 be
  • 01:04:02
    heading level four essential waitress
  • 01:04:04
    state cut combo box favorites first
  • 01:04:07
    Heinz baked beans in tomato sauce 4 X
  • 01:04:09
    400 15 G heading level four link ever
  • 01:04:15
    featured suitable for vegetarians Ines
  • 01:04:17
    baked beans in tomato sauce 4 X 400 15 G
  • 01:04:20
    2 pounds 2 pounds and 7 5 frames for
  • 01:04:24
    Deepak
  • 01:04:25
    no more edits at level 6 for columns and
  • 01:04:29
    12 rows column 1 Row 1 typical values
  • 01:04:32
    okay so there I just used tea which is
  • 01:04:35
    the shortcut to get you to a table and
  • 01:04:37
    told me add 4 columns and a number of
  • 01:04:40
    rows and the first cell in the first
  • 01:04:44
    column was typical values so I'm going
  • 01:04:48
    to use the screen readers shortcuts for
  • 01:04:50
    navigating through a table in this case
  • 01:04:51
    it's holding down ctrl + alt and using
  • 01:04:53
    the left and right arrows will move me
  • 01:04:55
    horizontally across the table so if I
  • 01:04:57
    move right for 100g column to 4 ones
  • 01:05:00
    left who can column 3 so it tells me
  • 01:05:03
    which column I'm moving into and it
  • 01:05:05
    reads the the content of that cell % I
  • 01:05:09
    start column for okay so that's useful
  • 01:05:12
    so if I now keep those keys held down
  • 01:05:14
    the control in the alt but I move use
  • 01:05:16
    the down arrow it'll move me straight
  • 01:05:19
    down that particular column
  • 01:05:21
    Landro to 8% row three okay so all we're
  • 01:05:29
    hearing at the moment is the screen
  • 01:05:31
    reader just reading the contents of the
  • 01:05:33
    cell that I happen to be focused on okay
  • 01:05:36
    said 8% what it's not doing sadly is
  • 01:05:39
    telling me anything useful about the
  • 01:05:43
    nature of the row I am in if I try
  • 01:05:46
    moving back left along that horizontal
  • 01:05:49
    row it may be a bit more useful with the
  • 01:05:52
    column information for ones left who can
  • 01:05:54
    162 Cal column three alert from a breeze
  • 01:05:57
    so moving that way as I moved left back
  • 01:06:01
    along that row it did read the column
  • 01:06:03
    header information before the contents
  • 01:06:05
    the cells if I move left again for 178
  • 01:06:08
    Cal column two so you know 78 calories
  • 01:06:11
    per 100 grams of baked beans and if I
  • 01:06:13
    move left again typical values black
  • 01:06:16
    column 1 Row 2 I'm in an energy column I
  • 01:06:23
    go down this column row 3 row 4 100 G
  • 01:06:30
    0.2 G column 2 / 1/2 can 0.40 column 3
  • 01:06:34
    alert from Smashing Magazine 4% ristar
  • 01:06:38
    1% so this table is half set up well for
  • 01:06:43
    good screenreader use it's using
  • 01:06:45
    probably th elements for the first row
  • 01:06:48
    of the content in the table and that
  • 01:06:51
    basically means that whenever I move
  • 01:06:52
    into a table cell going left or right
  • 01:06:56
    the column header the th cell contents
  • 01:06:59
    for that column will be read out before
  • 01:07:01
    the contents of the cell think about
  • 01:07:03
    this sort of two pieces of information
  • 01:07:06
    that hooked together what they haven't
  • 01:07:08
    done in this case is made the same
  • 01:07:11
    relationship available as I move up and
  • 01:07:13
    down columns so ideally what would
  • 01:07:14
    happen is is that the the road the
  • 01:07:16
    energy the carbohydrate that piece of
  • 01:07:18
    information would get rid out first
  • 01:07:20
    before the contents of the table cell
  • 01:07:23
    that told me what the actual value was
  • 01:07:25
    so this one's half right and half wrong
  • 01:07:28
    example but this is one of the reasons
  • 01:07:31
    why I actually done well
  • 01:07:33
    accessible HTML tables are incredibly
  • 01:07:35
    useful that they're a pretty efficient
  • 01:07:37
    way of getting to information for much
  • 01:07:39
    the same reason that they're efficient
  • 01:07:41
    visually you can kind of look up and
  • 01:07:43
    look down look across and then kind of
  • 01:07:46
    correlate the two things in the middle
  • 01:07:48
    to the table cell has a little
  • 01:07:49
    information where people are actually
  • 01:07:51
    interested in and on that note I think I
  • 01:07:56
    have maybe run out of immediate examples
  • 01:07:59
    that was mind blowing no pun intended
  • 01:08:04
    but it was really eye-opening and I've
  • 01:08:08
    known you for donkey's and you know I've
  • 01:08:10
    been an accessibility boor for well over
  • 01:08:13
    a decade but for you know with those
  • 01:08:16
    people watching you never have seen
  • 01:08:19
    somebody using a screen reader I'm
  • 01:08:21
    imagining that they're amazed so Thank
  • 01:08:27
    You Leonie you you you have a
  • 01:08:30
    consultancy company don't you what's it
  • 01:08:32
    called I do
  • 01:08:33
    it's called tetra logical and it's a new
  • 01:08:38
    company in the accessibility space
  • 01:08:40
    moving away from traditional
  • 01:08:42
    accessibility consultancy into emerging
  • 01:08:46
    tech things like a IVR XR biometrics and
  • 01:08:51
    also helping organizations with creation
  • 01:08:55
    of usable and accessible voice assistant
  • 01:08:57
    applications and also self sustaining
  • 01:08:59
    accessibility functions within their
  • 01:09:01
    company so rather than getting an audit
  • 01:09:04
    when you think you're going to be sued
  • 01:09:05
    figuring out ways to make organizations
  • 01:09:08
    get it right before they get to that
  • 01:09:10
    point wicked so if any of our audience
  • 01:09:13
    actually felt like hurling vast sums of
  • 01:09:16
    cash at you and bottles of tequila they
  • 01:09:19
    could not hurling bottles there's one
  • 01:09:34
    thing I remember I promised that I would
  • 01:09:37
    share people what speed I typically
  • 01:09:40
    listen to these actually a Dalek
  • 01:09:44
    I said self-control ticks lower class
  • 01:09:52
    bat bat last class that's better better
  • 01:09:53
    better Oh couple of things but this is
  • 01:09:58
    broadly where I listen to things up
  • 01:10:13
    doesn't your computer get out of breath
  • 01:10:15
    very quickly yes was Watson I can't
  • 01:10:21
    thank you enough sorry for the
  • 01:10:23
    complexity starting but the audience
  • 01:10:27
    seemed to have enjoyed it and I've
  • 01:10:30
    learned a lot and thank you for your on
  • 01:10:34
    my site you're absolutely welcome and to
  • 01:10:38
    everybody listening
  • 01:10:40
    welcome to find me on Twitter if you
  • 01:10:43
    have any follow-up questions or Pingdom
  • 01:10:45
    by Bruce and smashing Meg and I'll do
  • 01:10:47
    what I can to help nicely and next week
  • 01:10:51
    ladies and gentlemen I must stop saying
  • 01:10:54
    ladies and gentlemen next week folks we
  • 01:10:56
    have a related webinar because I like
  • 01:10:58
    things
  • 01:10:59
    Andy Michael will be entertaining this
  • 01:11:03
    from Perth Australia and sure about the
  • 01:11:06
    practical benefits of semantic HTML in
  • 01:11:10
    Leoni speak about how semantic hTML
  • 01:11:14
    helps her but of course says many more
  • 01:11:18
    people with disabilities who are not
  • 01:11:20
    screen reader users excuse me and
  • 01:11:22
    there's many people in the world who are
  • 01:11:23
    not disabled in any shape or form but
  • 01:11:26
    also getting advantage from semantic
  • 01:11:28
    aches and Mandy will be showing you
  • 01:11:30
    those advantages not philosophical stuff
  • 01:11:33
    practical stuff and in two weeks time
  • 01:11:36
    Jing Jing curry Chen will be giving us a
  • 01:11:41
    talk on how using the Firefox developer
  • 01:11:44
    tools can help you learn CSS grid flex
  • 01:11:47
    box and box alignment so stay tuned as
  • 01:11:52
    usual we'll send you out an email to
  • 01:11:55
    remind you of those things tomorrow
  • 01:11:57
    there
  • 01:11:58
    be the recording of this webinar for
  • 01:12:00
    those people have to duck out early and
  • 01:12:02
    in a day or two maybe maybe a few more
  • 01:12:06
    days actually there will be a transcript
  • 01:12:09
    I'm thinking our transcribers might take
  • 01:12:11
    a little bit longer given Leone's Dalek
  • 01:12:14
    was involved on but as you know since
  • 01:12:18
    since I became member of Smashing
  • 01:12:20
    membership I've become manager of
  • 01:12:22
    Smashing membership we've been having
  • 01:12:24
    all of our webinars professionally
  • 01:12:27
    transcribed because it's the right thing
  • 01:12:30
    to do
  • 01:12:31
    Leonie have a lovely evening everybody
  • 01:12:35
    else have a great day whatever you're
  • 01:12:36
    doing and see you next week
  • 01:12:42
    [Music]
Tags
  • Leonie Watson
  • screen reader
  • web accessibility
  • Smashing Magazine
  • JAWS
  • Typeform issues
  • ARIA
  • application mode
  • semantic HTML
  • inclusive design