Holly: Okay. I'm going to show how accessiBe renders a webpage.
Screen Reader: Alert. Press Alt plus one screen reader mode. Stop this message with alt plus zero.
Holly: To start with, you can hear that it's prompting me to change to screen reader mode.
Screen Reader: Alert. Press Alt plus one—
Holly: I'm going to hit my control key to stop that.
In itself, it's somewhat concerning, because it means that
it's detecting that I'm using a screen reader,
and I don't know
Screen reader: Alert.
Holly: what information that is
sending back to the company.
I do, from my perspective, feel a bit uncomfortable.
Screen Reader: Alert. Press Alt plus one screen reader mode. Stop this message with alt plus zero.
Holly: It's also really annoying that this message just
over and over again. I would much prefer a button, say,
Screen Reader: Alert. Press Alt plus—
Holly: at the top of the page.
Holly: I am going to press Alt+zero,
Screen Reader: Alt zero.
Holly: and turn screen reader mode off.
Screen Reader: ASDA mobile. Which Xioami phone is right for you? ASDA. ASDA. ASDA.
Holly: It reloads the page.
I'm going to navigate through this page,
firstly, just by using the arrow keys to show what it's like
with screen reader mode off.
This is not using the accessiBe plugin.
Screen Reader: We're moving networks. During this period, we will not be sending a—
link F A Q S.
For more info— Navigation re— Visited link— list of two items
Holly: I'm scrolling down the page.
Screen Reader: Visited link, graphic logo slash ASDA mobile, list of two items
Discover, list of five— visited link, link Pay As You— link Pay As you— link SIM Only Bundle Calculator
Holly: I'm not listening to every single option.
I'm moving down more quickly, because there's no point.
My screen reader speech rate is quite slow.
I wanted to make sure that people could understand it
and really know what I was trying to demonstrate,
because I have it much faster than this.
Obviously, if you're not used to listening, then you wouldn't be able to understand.
Screen Reader: List end, nesting level one.
List of three items, nesting level one.
Link ASDA store locator. Link coverage checker. Visited link Blog.
List end. Nest— Support. List of— Link F— Link How to top—
Holly: These are just menus.
Screen Reader: List of four— link Call— link Con— link Tex— link Trans— List end, List end.
My account. Greeting— X. Greetings. X. Heading level six Discover.
Heading level six Support.
Link login. Visited link. Naviga—
Heading level one Which Xiaomi phone is right for you?
Holly: You've got a heading level one,
which is the title of the article, so that's good.
That should be the case.
That is what we expect from a heading structure.
Screen Reader: Since its inception in 2010,
Xiaomi has become one of the world's biggest smartphone—
Link fourth largest brand for…
Holly: Then we've got this first paragraph.
Screen Reader: Same page link Best over— vertical b— Same page link Largest s— vertical— Same page link Smallest screen.
Holly: These are same page links.
This is to move through the article.
This is a menu.
Screen Reader: Vertical b— Same page link Best camera. Vertical— Same page link cheapest.
Holly: That's, again, what you expect.
Screen Reader: Heading level two Best overall - Mi 10T Pro 5G
Holly: Then you've got heading level two with the best overall—
Screen Reader: Overall dash Mi 10T Pro 5—Released— 5G.
Holly: Then the name of the phone.
Screen Reader: Heading level two Best overall Mi 10T Pro 5G
Holly: That is again, something I would expect at heading level two,
because the heading level one
was the title of the article. Now this is
a piece of information about
one of the phones. I would expect heading level two for that.
I would expect heading level two for that.
Screen Reader: Released in the UK in November 2020,
the Mi— Xiaomi blank.
Holly: Then we have a paragraph.
Screen Reader: Table with two columns and twelve rows.
Holly: Here we have a table. It says table with two columns and twelve rows.
Screen Reader: Cost five-hundred ninety-nine pounds from link Mi.
Display six point six seven inch display.
Holly: I could either go down and read it
in a very linear way
or I can use Control Alt left and Control Alt right.
Screen Reader: Display six point six seven inch display
twenty-four hundred ex ten eighty resolution.
Display.
Size.
Holly: Now, I'm doing Control Alt down, it says size.
If I go to the right…
Screen Reader: H equals one-hundred sixty-five point 1 em em W equals—
Holly: Again, this is what I expect.
The one issue I have with this table
is if I go down the column on the right,
which is the information.
The column on the left is the heading, so
Screen Reader: Size.
Holly: things like size,
Screen Reader: Display.
Holly: display
If I go on the right,
Screen Reader: six point six seven— H equals one— Rear equals trip— Qualcomm Snapd—
Holly: I'm moving down that column.
I don't know what this data corresponds to.
That is a problem with the HTML table mark-up.
What you would expect is
for the data to be tagged in a way
that it indicates what heading it corresponds to.
That hasn't happened in this table.
I would hope that when I enable accessiBe,
it would fix that.
If I'm on this table and
I want to move to the next phone,
I can just press H.
Screen Reader: Largest screen Mi Max three. Heading level two.
Holly: You go by heading.
Screen Reader: Smallest screen Mi Mix two S. Heading level two.
Holly: Or I can press two
to specifically go by heading level two.
Screen Reader: Best camera Mi Note ten Pro. Heading level two.
Cheapest Xiaomi Redmi eight. Heading level two.
Holly: As you can tell, both of these work well,
even though accessiBe isn't enabled.
I really wanted to show what it was like to start with.
Yes, it's not an ideal experience,
because you have the issue of the
data not corresponding to the headings in this table,
but that mark-up
of the actual heading level structure is
Screen Reader: Other smartphone
Holly: decent.
Screen Reader: choices heading level—
Screen Reader: ASD—
Holly: Let's go to the top of the page.
Screen Reader: ASDAmobile. Which Xiaomi phone is right for you?
Holly: I'm going to hit Alt 1 to enable accessiBe.
Screen Reader: Alt+1.
ASDAmobile. Which Xiaomi phone is right for you?
Screen reader mode is on.
Alt plus zero to cancel.
ASDAmobile. Which— ASDAmobile same p—
Holly: Now screen reader mode is on.
Screen Reader: Same page link Skip t—
M— Same pa— We're moving networ—
Link F A— for more in— Main me— visited link list of two i—
Visited link Home wide and black letter B
List of two items.
Holly: The difference I've noticed here…
Screen Reader: Visited link Home wide and black letter B
List of— Discover— Suppor— List end.
My Account visited link. The latest— Main m— Main region.
Heading level one Which Xiamo phone is right—
Main— Main— Visited link The latest scoop.
Link— List— Nest— List of— Main from link of—
Same— Same— Same page—
Holly: …is that a lot of these menus seems to have disappeared.
seem to have disappeared.
Link Home— List of two items.
Discover button. Support button. List end.
Link My account. Visited link The latest s—
Main menu— Main re— Heading lev— S— S— S— Heading—
Holly: You remember when I navigated the page
without screen reader mode on
there were all these menus at the top.
I presume these are now under these buttons
Screen Reader: Support button. Discover button.
Holly: which say Discover and Support.
Screen Reader: Space. Banner region. Navigation. List of five i—
Visited link Home page. Link Pay— Link Pay as you—
Link SIM— Link Bund— List end. Navigation. Navigation.
List of three— Link ASD— Link Coverage— Visite— List e—
Navi— Support. List end. Link My accoun—
Holly: These are now hidden under buttons.
I would say that's a decent experience.
What it might be nice is to know
that it's an expandable menu
rather than just a button,
because I might think, "Oh, if I tap on that button
that might take me somewhere".
That is a minor point. I definitely see menus hidden
behind buttons all the time.
Ideally, I would be notified that that can be expanded.
I can forgive not having it.
It's one of those points that
if I'm not sure what the right answer is
I can just tell you what I see as
a blind screen reviewer a lot of the time.
Screen Reader: Visited link The— Main regio—
Heading level one Which Xiaomi phone is right for you?
Holly: Again, we have this heading level one
with the article title. That's good.
Screen Reader: Since its inception in— Link fourth lar—
brand for— for you? Find out be—
Holly: That first paragraph.
Screen Reader: Main region end. Link Twitter new window.
Page menu navigation region.
Same page link Best over— vertical— Same p— vertic— Same— vertica— Same—
Heading— Released— Heading level two button
Best overall Mi ten T Pro five G
We had those links to
navigate through the article.
Now, we also have heading level two
with the name of the first phone.
Again, that's good and that's what we expect.
Screen Reader: Xiaomi blank. Table with two columns and twelve rows.
Main menu. List— Navig— List of five— Navi—
Discover but— Heading five hundred— Heading le— Table— blank—
Table with two columns and twelve rows.
Holly: I'm not sure why the page
just jumped me back up to the top,
but I'm back to the table now.
Again, 2 columns and 12 rows.
This is where things change.
Screen Reader: Heading level two cost.
Holly: As you can hear,
it now says, "Heading level two cost."
Screen Reader: Five hundred ninety-nine pounds from
Link Mi.
Holly: The problem with this is
it's labeling all of the headings
in the table as actual heading levels.
That's not what I want.
Screen Reader: Heading level two display.
Holly: It's putting the right heading level two
and that's really frustrating,
because they're table headers,
but they shouldn't be headings on a page.
Especially not at heading level two,
because that's the same as for the
names of the phone.
If I'm navigating by the number 2…
Screen Reader: Size heading level two.
Cameras heading level two.
Processor heading level two.
Holly: …I'm going to get all these table headers.
Screen Reader: Storage heading level t—
Battery heading level—
Colors heading level t— Materials— Features— Largest screen Mi Max 3. Heading level two.
Materials— Features headi—
Largest screen Mi Max three Heading level two.
Holly: But then I'm going to get the next phone.
Screen Reader: Features heading level two.
Materials heading level two.
Holly: That is really really frustrating…
Screen Reader: Heading— Five hun— Heading— Table— blank.
Holly: …because I just can't navigate effectively
using heading level navigation anymore.
Screen Reader: Heading level two Cost.
Holly: Let's go to through the table using
table navigation keys.
So Alt, Ctrl, and then Up, Down, Left, and Right.
Screen Reader: Heading level two Display.
Heading level two size.
Holly: I can do it this way.
Screen Reader: Heading level two
[accent change] five hundred ninety-nine pounds for Mi. [end accent change]
Rear equals Triple rear camera one [accent change] cost [end accent change].
Holly: This is the thing I think is really strange…
Screen Reader: Heading level two cost.
Holly: …if I go to cost and then go to the right…
Screen Reader: Five hundred ninety-nine pounds from link Mi.
Holly: …You hear it reads quite normally
and then I go back left…
Screen Reader: Heading level two cost.
Holly: …it reads normally. Now if I go down…
Screen Reader: Heading level two display.
Holly: …to display. Now I go right…
Screen Reader: [accent change] five hundred ninety-nine pounds for Mi. [end accent change]
six point six seven inch display. Twenty-four hundred ex ten eigh—
Holly: It then reads the cost before it reads the display.
And it reads it in a different accent.
Screen Reader: [accent change] Cost [end accent change].
Heading level two display.
Holly: Again, when I go back to the left
it says cost before it says display.
I'm not sure quite why it's doing this.
I understand why the dialect change.
That's a setting in JAWS so I could switch that off.
But really, it's very odd that it's doing this,
because cost and the price are not headers themselves
and it's almost acting like they are
for the entirety of the rest of the table.
Screen Reader: Six point— Twenty-four— Heading level—
Holly: I would say overall with the screen-reader mode enabled
this is much less accessible unfortunately.
It's really frustrating because,
yes with accessiBe disabled it wasn't an ideal experience.
As I said, the table mark-up still wasn't perfect,
but it actually worked a lot better than it is working right now
and I think that is something that should be addressed.
It's something that perhaps people aren't talking about.
I think this is one of the nuances that is missed in this discussion
There's very much an attitude of
you're either attacking accessiBe
or you're defending them,
and I have no interest in doing either.
I'm a blind person who uses the internet.
I'm not an accessibility tester.
I don't benefit from accessiBe failing.
I'm not marketing a competitive product.
I just want to be able to use the internet.
So really, I should want them to succeed.
But, if they don't and
if their product is making my experience worse
then I will talk about it
and I'll be very honest.
I hope this video was helpful
Screen Reader: Six thirty P M.
Holly: Sorry, you can't see me in it,
but I wanted you to see my screen,
and I do think seeing me isn't particularly relevant.