hello i’m Thibaud here at DjangoCon Europe 2021 sprints um today i’m going to be reviewing the accessibility of a project called Django Postgres Metrics kindly provided to us by Markus Holtermann i’m recording this for the purpose of teaching people how accessibility audits are done and also just as a way to record the issues we might encounter throughout the audience it’s 11 hours so this project Django Postgres Metrics is quite an interesting example for us because it’s kind of a textbook Django third-party app where the code is on github the project itself consists of customizations to the Django admin so adding more views onto the admin and uh the documentation for the project is in read the docs with the default theme um so I would suspect lots of the issues we might come up with we actually come from those learning projects rather than necessarily what happens in this Metrics project um I have done a quick uh scoping of the audit so we look at the html templates in github we look at the actual UI in the Django admin this is what matters but I would quite also always like to look at the templates first if I can when I join audits we look at the docs in read the docs again they use the defaults things rtd theme so any issues might be with that theme rather than the actual docs but more for nonetheless and finally we look at the docs in the readme because people might not think of this but it’s always important for the readme to be accessible methodology our quick personal view we’ll use the browser extension called Accessibility Insights which bundles the Axe checker as well as some semi-automated tests we’ll look at keyboard navigation color contrast dark mode support uh right to left language support and then we’ll spend some time with creator navigation with voiceover in safari and yeah let’s get going um just so you know in the bottom right of the recording we have the gather town UI from the sprints we have visualizer for my keyboard shortcuts and then we have me and yes the templates so I always quite like to get started with this because it’s usually a good indicator of things to look into further I believe most of the UI from this comes from the Django admin itself though okay so I can see there is some some additional styles for right to left language support which is interesting to test for us then you can see there is a table that has a caption so that’s pretty great I see that the strings are marked for translation which is exactly what you’d want title as well it might not be needed to have both the title and the text there but we’ll have a look at that later um table body okay it’s quite nice to see that uh the header cells have been properly marked as th with the scope of row that’s quite important for accessibility and to check that here as well the label is translatable here again probably the title shouldn’t be there but we’ll have a look at this when we actually test the UI um so yeah I quite actually do this just to mark things for further testing essentially and it’s also much nicer for developers if the bug report can involve can can pinpoint which specific line to change okay so looking at this table template breadcrumbs um so this could be something that you mark as a navigation landmark for screening users so that they know right away where to look for those brain cramps and can jump straight to that I will confirm that when testing translatable labels that’s great okay I see that there is a separator between the breadcrumbs items we just want to make sure that this is announced in a way that screen reader users can understand but should be no problem with that um I see there is an h1 with the metric label I don’t see the page this title meta being set but I assume it might match this that’s kind of what we’d expect anyway toolbar with description okay h2 all right that seems okay at least as far as I can tell in the html I see there’s a notion of metrics being selected here would be good to see how that works in practice and whether screen your users can tell what is selected uh here I see the title again on the a tag I it might be done for truncation purposes maybe but again i’m probably not sure why this is needed table caption great t-head with the row with th scope that’s perfect honestly I wish all of the tables I audited were like this I see there is some table sorting going on um this in this case the title attribute probably is correct because you do want this to be visible to screen your users without and and also cited users if they know to hover the thing without getting in the way of the table layout and we want to test that further obviously and then the body so the rose there is some cycling I assume for stylistic purposes and I have no idea what this is okay so so far so good um yeah and I see that this is using the base templates from the admin i’m just checking that I haven’t forgotten anything else have a quick look at the styles potentially so there is a base style sheet so we want to check how this whether this icon has some alternative text for three leader users um want to check the contrast of those colors obviously I see here it’s using floats left and right oh this might just be because it’s following what the admin does but if you want to support right to left languages it’s much nicer if you can do layouts with um flexbox and css grid because then you won’t have to yeah you won’t have to override how you set the floats based on physical properties left and right if you if you use if you do this with flexbox it will automatically pivot your layout without you having to write the styles twice same for this you can use a logical um padding inline start and finding adding inline end properties and that way you only have to write the styles once and browsers will automatically apply them left or right based on the rco direction okay give that a pass at least for now I need to actually look at a report the things that I have found then the UI so we’re in the Django admin i’ll start with my most basic automated tests with the xpt insights extension okay there are some issues um color contrast color contrast color contrast okay all of these are color contrast issues which I think likely come from the Django um css directly not these projects so I won’t spend too much time on them definitely want to report them but they aren’t worth further immediate attention I will disable the colors yeah nothing too too outrageous there it might be quite hard to see this edit icon but um I think since it’s just there as a decoration with next to the table it should be completely completely okay headings h1 h1 h2 h3 that’s all Django landmarks no landmarks that’s quite bad but that’s all Django as well I assume tab stops always worth a quick check in which order we tab through the items on the page whether it’s logical or not logical generally meaning left top to bottom left to right that looks quite good to me would be nice to have a skip link so that I can go straight from here to the content there but again that’s just a Django thing not with this specific extension needs review what is this review oh interesting I haven’t seen this before okay I don’t know what was the thing that needed the review but we’ll leave this there for now um quick check through some of the other pages oh contrast contrast I imagine this is the breadcrumb we had seen earlier might be worth checking how tabbing through this looks this doesn’t look readable enough um I assume this might be the selected oh no this would be selected yes we need to look into this with a screen reader as well see how it announces but this seems like it’s not enough contrast at all um let’s do a quick check of this this specific color because it feels like it’s probably the worst one that I could spot on the page breadcrumbs foreground color contrast isn’t isn’t such a binary thing as as pass fail you know for when people actually uh look at pages um but still this is this is very poor um so you can’t expect people to be able to read this I i assume this is a Django issue though not a post-christ Metrics issue um and I i assume all of the other ones are similar contrast failures I won’t spend too much time on these um this is this is um not a contrast issue but it can be quite problematic for screener users to have full urls like this because it will literally announce all of the text character by character so it will not http column slash slash www dot c r I a I g and so on which which isn’t that pleasant to read um and particularly in lin within link text like this I believe that lots of screen readers won’t allow people to navigate to skip some of the text of the link that easily compared to in copy we’re navigating character by character is very straightforward and you can also skip the whole block um so for links I would strongly suggest not to have them as urs for the label like this um it’s not always too big of a deal you know if the link is quite short and only contains plain plain language words it could be fine but in this case at least removing the beginning here would definitely help and adding a proper label would definitely be better what’s the difference between clicking here and clicking show okay no difference get back to that a bit later I think a quick tab check through this I wouldn’t have expected it to jump there so this is the navigation the same navigation as on the index right yeah i’m a bit surprised my my tab jumps from top left to essentially or right column I feel like I should probably go through the left column first um or if there was some kind of skip link it would be could it could be okay I suppose it’s just a bit bit confusing I i don’t find it particularly helpful because it’s navigation that’s already repeated on the main page anyway so it just gets in the way of you actually reaching the table if you want to type through the table instead so table says something going going weird as well here so i’ll reload this with the tab stops visualization okay so so far apart from this diagonal line this all makes sense to me then here what’s quite weird is that it starts with the ordering feature toggle sorting and then this and then there then that so it should definitely be left to right within the table um header okay and then we jump to the next table with the same thing going on yeah that definitely top left top top bottom sorry and then left right um okay this looks very similar this looks the same but with a slightly different theme and we have the same thing here with the links we’ll have a look at how that’s announced together a bit later okay I think that’s probably as far as we can get with automated checks we did spot oh sorry automated checks that’s here we did spot a few issues but most of them will Django itself keyboard navigation we did as well at least very briefly color contrast dark mode support um I i can spot as well as we talk through this that we did see the h1 being set correctly but I can see in my browser tab here that the title of the page isn’t set correctly so this would be quite problematic for a screen reader user who’d rely on the title being announced when they arrive on the page to tell what the page is um 90 of the time you want this to just match at least as the baseline you always wanted to match the pages h1 so here it should be index size vertical separator Django site admin I suspect this might be due to how this is customizing the base template for Django I mean could be pretty straightforward to fix and would be quite a nice improvement dark mode support so dark mode so the Django admin supports dark mode since a few versions ago it’s always an interesting thing to test people because people do rely on change customizing how pages are displayed with other either user style sheets or browser extensions or dark mode to just accommodate their vision you know based on the time of the day or just how tired you might think you might be um okay so moss yeah um most of these looks completely fine just a reverse light on dark rather than the opposites but those rows have a problem I imagine it must be might be a color that’s customized with one of the hard-coded values which we saw in the style sheets we need to check whether that’s a green or not um so the issue might just be that jungle still still does swap the uh color of the text but doesn’t know how to swipe the color of this row so if people if people want to support dark mode in their extension they would need to make sure to use css variables like Django does so the color swaps here as well yeah I mean you can see this is completely unreadable so at this stage if I could make the connection as a user that this was a dark mode issue I could swipe back to light mode potentially and be a bit annoyed but if I don’t make the connection then I just can’t read this table header not supporting dark mode probably isn’t a failure of any expertise standard but contrast issues definitely are I assume this is the same situation here let’s look do a quick contrast check yes so this is the only thing that’s flagged yeah well yeah I looked I saw this one a bit earlier but here the whole table is basically unreadable um so I i think it’s quite common for developers to use dark mode um hence why Django has support for it so I definitely expect this to look equally as good and at the very least be readable okay I have everything in dark mode myself most of the times except for audits um so yeah I definitely appreciate when people take some time to support it and here since Django does set the expectation that it’s supported I think it’s quite important for Django packages to also support it all right to left support is the exact same situation where Django supports it so I think it’s good as the baseline for extensions to do the same thing um i’ll just test it the quick and dirty way by changing the value of the dr attributes in the page and looking into any issues a quick word of warning that right left support isn’t one of my specialties at all so i’ll be doing this very nicely and I might be missing very basic issues but still worth taking a look what’s this so here recent actions um yeah it’s just it looks a bit odd because the layout is different but it’s not so it’s not a right to left support issue and this is though I think this heading would be meant to be right aligned in here why are you not right aligned text line left is this one of the customizations from the extension I can’t tell doesn’t seem to be I would have expected this to be right aligned um so similarly here this looks like yeah it might be a Django issue similarly here if you do text align start which is a logical value you don’t have to do anything else you can just set it to a logical value always and then whichever direction you’re in it will automatically swap the browser will automatically know to swap so do use those logical properties if you if you don’t have to support legacy browsers essentially um same here it looks like the labels of the header cells are left aligned and the ordering still is on the on the on the right side this should be swapped around content exactly where that issue comes from but yeah and I think I think all of the other pages would have the exact same issues so i’ll keep keep this brief yeah this needs to be right this needs to be left and let’s see how easy that might be to fix with yeah so padding right adding inline end and then we can just change that once don’t have to set it again one way or the other based on the based on the rtl direction here the padding is symmetrical so we don’t necessarily need to change the property that is set text line starts rather than left and it doesn’t seem like we are too far off um there is a clear fix is that a clear fix yeah so don’t don’t don’t use floats layouts in 2021 if you can avoid it of course if if your code is already written like this it’s okay but um it’s just making your job harder later on um so the thing that would be floated would be the sort options yeah so we could do floats and inline and I believe that would that would swap it okay um but yeah that’s something I i would generally recommend against and I would use um flexbox or css grade instead because they are much nicer to work with than floats but there are logical properties for float as well um I will leave this there because I think that’s enough for now and I got stuck and so screen your navigation is probably one of the most useful things to do because it’s a good test of everything else essentially and because for people who rely on readers to navigate Django not having support for it basically usually means they can’t use your site at all um whereas some of the other issues you might have you might have ways to walk around them uh I forgot something from my list that I want to cover very briefly which is uh I guess mobile support might be a good terminology mobile support I don’t think it’s that big of a deal for this not to work on mobile devices but at least the layout should still be usable on smaller screen widths you probably want to test this properly with touch touch input as well but for now we’ll just test the screen with support so this free flows so this isn’t this isn’t ideal um although I appreciate that tables are always hard like this and what I would suggest with something like this is to make sure that the page itself doesn’t reflow but only the table is scrollable left to right so you don’t have to work that hard to just make sure that the table overflows the content and then only the table is scrollable um this isn’t one of my areas of expertise either but generally the idea is that you don’t want people to have to scroll into two directions at the same time to look at your content you want you cannot be visible with scrolling in a single direction so that the movement can be more precise so yeah in this case prevent the page from reflowing still have your table overflow but then just the table is scrollable and nothing else and obviously you could make nicer things if you wanted to make the mobile experience nicer but this isn’t necessarily a problem here um for this not to have stellar mobile support links same one other reason why links like this link labels like this are bad is that they don’t reflow that easily um we could add like um not thin spaces but spaces that zero with spaces to indicate to the browser where to where to cut but it’s just much nicer to use a label that people can read here on the cache hits i’m just noticing this it feels like it’s probably very little contrast for you to notice which of these is active um if I disable the colors yeah I mean if i’m colorblind it’s really hard for me to tell which of these things is the one that’s currently active so i’ll suggest an underline as a style rather than the the text um this is also yeah this this this is also using using the the text color but it’s using the text color of a link for the one that’s active and probably you shouldn’t need to click and the text color of text for the ones that aren’t active so i’ll probably suggest some some other style in here not quite exactly what to suggest but at least there should be enough contrast so that you can distinguish which of these is the active one um even if you’re colorblind and some indication of which one is selected without color I know there is this thing right there but this definitely doesn’t have enough contrast against the background um the color contrast for this would be three to one i’m gonna color contrast ratio and i’m pretty sure this isn’t anywhere near three to one what color are you backgrounds yeah this isn’t three two one contrast ratio so yeah better indicator clearer contrast and indicator that doesn’t rely on contrast um yeah all of all of the other pages are equally will equally have the same issue with tables and the links so I probably would leave it there for now might want to think carefully of how the the numbers reflow as well if that’s a thing um i’m not quite sure whether this is meant to be right by me or not but I wonder if it is well I assume it is just don’t know whether I as a user of this i’d be able to tell what the number is exactly but we might want to think of adding adding numerical assuming this is an integer that is a quantity assuming this is an integer that is a quantity having some separators would make this much easier to read and would um make this more likely to be understandable when it reflows like this all prevents prevent it from reflowing when the text wraps like this all together I think it would be completely fine in this case if the table was gigantic as long as it doesn’t make the whole page reflow when just the table is callable yeah I have a feeling for everything numeric separators would be a nice improvement okay screen readers so i’m on a mac screen that’s built into max is safari is voice over and um voiceover has the best support in safari so we’ll switch over to safari to test this okay we’ll start from here voiceover on safari site administration vertical line Django site admin okay I have enabled safari you should be able to hear this just fine but there’s also a text version of uh the text to speech output of safari in the bottom right and um inside you can see this um two-tone cursor that’s safari’s cursor which is based on keyboard navigation but it’s different than the normal keyboard navigation with the tab keys i’ll just use an fyi and then whenever I arrive on an element um safari sorry voiceover will announce that elements name links menu visited link check links menu you are currently in a UI which I can get open for safari to uh allow me to navigate through the whole page uh I don’t think link change password you are currently on a link voice over off I don’t think this rotor UI shows up on the screen share i’ll see if I can configure this um why don’t you show up on the screen share what are you I that’s because I had my screen set up the wrong way around so you go there and you go there as well yes sorry for them small hiccup just making sure I set this up the correct way again where are you gather town here you are okay so we are back in safari get this back open voiceover on safari site administration vertical line Django site admin window site administration vertical line Django site admin web content has links menu you are currently escape button escape but visit link visited link log out site administration f5 button search button f5 button voice over off all right I think we’re good to go so voice over voice over on safari inside administration welcome visit well visited heading level 1 link Django I have lost my I have lost my cursor for some reason let’s try voice over off close safari and restart it voiceover on safari cite a minute inside administration vertical all right links menu so this allows us to navigate through all of the links on the page this is why it’s important for accessibility that all of the links should have unique labels as we see here and that um the labels make sense with outcome visited link link show so this is a bad example obviously um we have three six seven links that say show not have the same label no idea to tell there’s no way to tell which one shows rights at least the icon doesn’t display in the link text and isn’t announced that’s perfectly that’s exactly what we want but this should say so detailed index huge usage for this specific example um you shouldn’t you shouldn’t have to know where the link is on the page to make sense of what it takes you to headings menu heading left visited heading level one site administration i’m pretty odd to have two h1 like this that probably shouldn’t be visited heading level one link Django administration because the point of the h1 is to be describing the contents of the page which should be unique to each and every page um that’s a Django triangle no item tables menu ah p o s t g r e sql metrics two columns seven rows um so the table is enabled that’s great but p o s t g r e sql metrics two columns seven rows as you can tell um voiceover announces it by spelling out each of the letters I think it might be because of the upper uppercase authentication and authorization p-o-s-t-g-r esql metrics two columns windows links heading visit visited heading level one link Django voice over off because it’s quite I mean it would be quite painful for someone using this reader to have it describe Postgres as p o s d and so on obviously you could you should still be able to make sense of um what this links to if you had to use it but it’s just not that pleasant let’s try it again voice administration authenticate link visited link che end of table heading level two Postgresql metrics table two columns seven yes you can already tell how much nicer it is to hear it like this it might not be the perfect pronunciation but it’s definitely much more pleasant it’s the common misconception that applying uppercasing like this with css that means that it’s not picked up as parameters that’s that’s maybe not completely false but I defend definitely dependent on each and every generator and they definitely understand css and use it so in this case Postgresql metrics table I would argue that this is easier to read for people because you know sql is meant to be uppercased and announced letter by letter and this is also nicer for screaming the users to have it announced with the more correct pronunciation Postgresql metrics table two I also find it a bit uh heading level 10 recent actions and then the other table that doesn’t make that much sense to me it should again be left top bottom none Postgresql match um link available extensions column one of two link show column two of two row two of seven available extensions link cache hits column one of two cache hits you are currently on a link show column two of two um so yeah the show thing doesn’t doesn’t work at all um because because you can’t tell what you’re showing um and the usage of the table like the for this as well um tables are meant to meant to structure data in this case it really is just a navigation menu so I know this is because Django but personally I definitely recommend just having this as a list of links um you have a heading that says maybe heading level two Postgresql Metrics maybe you mark that as a navigation region or not not even that and then within this list of links you might have a ul with each of the links that would be much faster to navigate through row one of set link postgre none of Postgresql metrics table two link available on the road rule-based navigation it’s not it’s not too bad but and you can make sense of the the navigation apart from those show links but it’s definitely not not the best link available link toggle sorting vertical line Django site admin web content you are currently on a link inside a cell to click this link press ctrl option space let’s try that again translation of l link row three of seven available extensions link detailed index usage column one of two visited heading level one link Django administration vertical line Django translate cited link visited heading level one link Django you might just haven’t noticed that I was focusing on this or maybe I had this toggle the last time I came here so that’s why I jumped straight to this specific part of the page um administration visited in vertical line Django site admin web content this yeah so here this is missing the title of the page which should match the h1 visit visited link home so yeah I think it would be nice for this to be announced as a landmark a navigation landmark called breadcrumb then you’d have a much easier time skipping it as a screener user or jumping straight back to it as you navigate the page so heading if it was a landmark it would show up no items table window links headings menu it would show up in the landmarks navigation of the rotor heading level two p o s t g r e sql metrics i’ve seen this before but this should this shouldn’t be uppercased it just makes it harder for people to read the text and fostering us to advance it to the correct pronunciation and we’ve seen it before as well but there shouldn’t be two h ones the only h one should be available extensions no tables menu default user equals some user db nam equals son edb second user equals other user db nan equals o-t-h-e rdb four columns 72 rows so I think this is this is probably fine but just keeping in mind that when you don’t have space like this between between words it makes it harder for screen readers to properly uh intonate the letters so it might be a bit better overall if there was a space between the equal sign and the under and the text but in any case I think this is probably reasonable enough two eye window spots links menu visited considering those things have um have uh the the specific uh label here has a meaning for developers beyond the UI um this area right there to the left to the right with the navigation links I should definitely be a navigation landmark so that I have an easier way to headings menu links menu escape button windows contact tables media you are currently on a text element inside web content this isn’t even announced I don’t think it would trip anywhere user but I would probably suggest making this area hidden just so it’s a bit faster to navigate through the page visited link poster asql metrics you work yeah Postgresql is definitely nicer available extensions you are currently on a text element inside heading level one available extension Postgresql can be extended heading left over like this I believe is slightly nicer if this is marked as a link as well then there is an area current equals page attribute you can add to the link that will make it so screen reader user three leaders announced that this is a link to the current page which makes it easier for people to tell that they are in this specific page of the hierarchy of pages heading level 1 available extension Postgresql can be extended by installing extensions with the create extension command heading level two p-o-s-t-g-r-e yeah i’ve said plenty about this already it should be um landmark for navigate nav landmark and this should uh be um title case not uppercase so it is pronounced and is more readable visited link available extension so here doesn’t seem to be any way for screen users to tell that this is the currently selected page or that you’re in this page um probably like an area current page would solve that as well visited default user equals some user db nam e equals s-o-m-e-d-b one column one of four okay so I believe this is a Django thing because i’ve audited it before but here it should definitely announce the columns name first and then whatever that is link toggle sorting you are cut link name you are currently on a link inside link default version column 2 link link link link link yeah so here my preference will be for you to say first link name and all link toggle sorting for name i’m not quite sure why there is two links to start with but maybe there is a reason and then the one I mean even as a sighted user I have no idea what this is link link default version column two of four let row two of seventy two one in name admin pack column one of four you are current so here you could say it started row row something to say with one and name um that’s because it’s reading the name of the cell because of the header cell because this is this header set is microscope equals color that’s what you want but it does mean that the one shows up in all of the cells here which might be very confusing artists for me I don’t really know what this is meant to be doing and the fact is using one while the navigation through the table also uses numerals to indicate which row and column you’re on is is quite confusing default version two point zero column two of four in com row three of seventy two one and name amp check column one of four you are currently on it so what would be interesting here is to is to navigate through this uh plpg sql row and figure out if there is any kind of announcement of why this is in a different color I can’t really tell at least from default version 1.
0 in text one points out install install sorry you had to watch me go through this i’m pretty sure that someone who uses a screen reader on a daily basis would know the commands to navigate this row by row rather than have to navigate through all of the cells like this default install comment yes so as far as I can tell there is no indication of why this row is special there isn’t any indication for sighted users either so i’m not sure why it matters to be honest um it might be more obvious for people who actually use this software on a frequent basis or spend time looking at Postgres metrics um but if that’s the case we would want to make sure that there is some indication for screening users as well some some programmatic way to tell that this is a special role visited heading level 1 tables menu window links menu link http colon slash www.
craigersteens. com201 slash one zero slash two zero one slash zero one slash understanding dash p o s t g r e s performance slash yeah so that’s a good example because was definitely quite verbose and I would assume not as nice as a as a proper label so in particular we could see that it could pronounce the domain name as a name because I assume voiceover has an understanding of um anglo-saxon names but it couldn’t properly pronounce the dates the months the the year the the months and the day and it couldn’t properly pronounce Postgres either um I assume because it kind of tells that it can tell that this is a url oh it can’t it can’t tell that this is a separate world um so I would definitely become db and equals switching this link http colon slash www something that uses um uses a proper label that matches the stock of the url link hits column two of three link ratio visited heading level heading level 1 link hits so it should say that source by hits rather than just hits otherwise you’d expect this to take you to a page that’s about hits which it clearly isn’t oh so that’s quite bad but I think that’s a drink link wrote hits reads five hits four hundred twenty five one and ratio zero point nine eight three seven two zero nine three zero yeah so one in ratio like you don’t definitely don’t want this to say one as it’s reading some other numbers it’s just very confusing um and and yeah this is using uppercase for the labels as well so there’s much bigger of a change for voiceover to mispronounce it and i’m not quite sure why this is in a different color um but it doesn’t seem like there is a way to screen our users to programmatically know that it’s in a different color voice over off let’s quickly look at how the page is structured and why this is highlighted or how this is highlighted so it says warning here right there so it should actually say warning then announce the number rather than having no way to tell that there is anything special about this um I assume this might be a similar situation for the other roles we saw where they were special in some way that the class name could tell us about yeah so it says okay you probably wouldn’t want it to say okay for literally all of the rows in this specific case um or maybe you would if it’s important let’s look at how it announces those numerals two one four seven four eight three six four seven selected menu three items closing menu two one four seven four eight three six four seven suggesting that my browser detects this as a phone menu three items closing I have a feeling that we probably want to disable that in Django the phone number uh auto detection on browsers and or format this as a numeral with separators where appropriate row one link what max value two one four seven four eight three six four seven yeah so here as well I assume that if it had separated voice over off it would probably be easier for voiceover to pronounce it more properly again assuming that this is not an identifier and definitely some kind of quantity um I forget what the proper separators are meant to be in in british or american english so forgive me this is the wrong ones void none selected max value two billion one hundred forty seven million four hundred eighty three thousand six hundred forty seven assuming this is a numerical quantity uh this is definitely much nicer of an announcement i’m well worth considering in my opinion visited heading level one link tab select total size 24 kilobytes column two of sep yeah so you can see here even even though it just says kb screener knows what is what is going on and gives it a more proper announcement total size 56 kilo table size 8 192 bytes in this case it’s smart enough to know it’s a quantity for some reason it might just be that the number is small and at the specific length it would change its announcement let’s look at this link very briefly visibility select see also the the size of star fork refers to the main data fork the free space map fsm visibility map vm and the initialization fork you are currently see also the link https colon slash slash www.
Postgresql. org docs slash current storage. html this one isn’t too bad but it would definitely be nice so if you pronounce the Postgres correctly here I would just move this link over to say Postgres documentation on the physical storage there’s this one on select right there that might be my first pull request to the project um yeah and I think we probably leave it there for voiceover for now voiceover off and let’s check where we are at in my testing plan not this dark where is my is that the one that’s the one ui done docs and the readme i’ll do the readme first I feel like it could be nice and quick hopefully this is an h1 I don’t know how readable those badges are for 3d users but we’ll take a look um contrast looks quite good it’s just not not bad not a good idea generally to have text in images like this but everyone does it um yeah let’s just look at the alt text for them uh good link good link can’t really tell that these are two different links but I imagine it’s not oops not that big of a deal well this all looks quite great I didn’t know github did that with the copy paste buttons i’m quite sure what this asterisk refers to right there but shouldn’t be too big of a deal uh great screenshots it’s a bit blurry for me but that’s I think most likely completely fine we’ll just want to check what else text there is for this I see there is a link to the actual file which is quite good if people want to look at the bigger version of the same thing it’s always a good practice whenever you can to to make this possible um I see there is an email address like this um might want to check quickly what’s going to use the screen readers with an ounce for this but I assume this is fine yeah this one looks quite good let’s try out those badges quick disclaimer here that’s I don’t really know how good github itself is screen reader so i’ll jump straight to the readme visited link d j n g o p o s t g r e s metrics article okay so the announcement of the project name isn’t so good um I think it could be nice to to title this Django as a noun Postgres as a noun Metrics with spaces and proper capitalization I quite like myself to also put the project’s pi pi package name in the h1 like this but in this case it does feel like it makes it harder for traders to enhance it properly probably not a deal breaker if someone uses your project risk frequently they’ll be used to this but it’s worth keeping in mind that there are consequences to using uh this kind of kebab case through the announcements that that dj ngo p o s t g r e s metrics yeah that’s weirdest we’ll be able to make dj ng djn in text out of djd out of heading link in heading level 1 link image github workflow status branch yes so this literally should say build passing like link build passing I should match exactly what the text in the image is I assume this is better than nothing to have um to have the alt text point that is the github or flow stylus for the branch but it’s not as good as what a sighted user would expect blank image cold cuff branch same here it should say coverage hundred percent link image read the docs I should say docs by saying um I i think you know this is just a limitation of this type of badge um UI unfortunately that there is no way for the alt text of the image to be automatically generated based on the status um so the only fix here would be stop using badges which probably doesn’t doesn’t help anyone so i’ll probably just make sure to say build status chrome canary coverage status potentially our coverage percentage and so on visited link image version link image license assuming your license never changes just how the right alt text for this say license psd python blank link image python versions you are currently on a link so what happens chrome canary has web content python 3.
5 vertical line 3 visited link this probably shouldn’t be chrome canary has new window voice over off yeah this shouldn’t be a link to the image if anything it should be a link to somewhere that states the versions in a text format so I could make sense of it and i’ll assume it’s the same issue for the Django badge voice Django selected Django heading level 2 background at link python canada 2017 you are currently on a link to click the let’s keep through the article heading level 1 start by installing dj ngoPostgresmetrics from pipi you are in this case I don’t think there’s any walking around the facts that it’s um announces it like this works this import left add period article heading visited link this is what a metric could look like visited link image metric example so in this case I would suggest chrome canary has new I assume the link uses the image alt text I think it would be nice for that to say screenshots of the Django Postgres Metrics UI and then have a maybe 10 to 20 words description of the screenshots content you don’t want it to be crazy long because there might not be a way for people to skip some of these with this computer but you do want it to somewhat describe what is going on on the image so in this case you might say screenshots of the detailed index usage view with some help text and a table with metrics for each database table something like that issue selected i’m work if you found or if you think you found a security issue please get in touch by info plus dj a-n-g-o-p-o-s-t-g-r-e-s metric star at star marcus alterman star d-o-t star eu you are currently on attack so the only things worth mentioning here is that 80 should be pronounced it’s 12 hours of trying a lowercase at d o t this should be dot it might be worth trying that lowercase dot otherwise I think this is okay okay selected okay voice over off now on to read the docs I have never audited one of those sites before so we might just decide to cut it short if it’s if it’s oh okay yeah I probably won’t uh want to talk through all of this we might keep it for another time this is the case where if i’m doing this as a professional audit i’ll shriek because I don’t want to be wasting my time manually auditing something that someone didn’t even bother to run automated checks for um it’s not like those checks are hard to run you know I you can definitely see that there is some attention to accessibility navigation and mark that’s great but if there is three of them on the page each of them should have a name it looks a bit odd to have an original mark within another elevation in mark uh main navigation navigation that sounds like something that will be announced twice the navigation part of this that’s something that probably has never been tested with the screen reader um main looks quite good footer looks quite good oh no footer looks terrible there’s nothing in it content info that looks great but you should also include this right there quick tap stops check hang on you didn’t go through the nav ah okay probably just me clicking on the wrong thing this is obviously missing a skip link so you can jump straight from the first tab stop to the contents how do I reach the version picker I can’t okay um so the redox link and version picker right there seem to be impossible to reach with the keyboard um don’t know how big of a deal it is for this project um there might be other ways to reach the different versions the search is there I guess the github links probably are in other places um but still you’d want all of the features of your sites to be to be reachable with the keyboard that’s a pretty basic accessibility 101 thing that everything should be accessible not just with a mouse but with other input devices um yeah sorry I shouldn’t be too sour but it’s just when the automated checks come up with so many issues to start with I know i’m going to have a bad time should be a single h1 it should be easy to fix let’s look at a few other pages looks completely fine to me this looks a lot like the redmi plus some extra information I want to check the alt text for this screenshot again i’m going to check how that’s announced that’s maybe like a definition list um um what did I have in my list automated checks keyboard navigation color contrast dark mode support do you want to try dark mode support I guess we might as well um i’m just changing this in my um my qs settings makes no difference that’s okay it just doesn’t support it rtl support I don’t think we need to look at this now mobile support will do a very quick check because I guess humidity is quite valuable in let’s say a conference environment for you to be able to look at your docs in a mobile device to learn about your projects and this looks it looks okay you might want to check that this is navigable with the screen reader but apart from that this looks fine there is no reflow what do I have next screen navigation yay let’s head back to safari voice over on safari welcome to dj a-n-g-o-p-o-s-t-g-r-e-s Metrics’s documentation dj and g-o-p-o-s-t-g-r-e-s metrics 0.
9 0. 9. 1. tev2 plus g82685 documentation window welcome to dj and gopiostg res metrics’s documentation dj the title is very verbose um first of all because of the project name not being something that can be pronounced um safari has new window oops I imagine that might be something worthwhile to fix and then the the project name is repeated next to the version number um I feel like I really don’t want this product name to only be there once in this heading and just in this title sorry welcome and welcome to dj and g-o-p-o-s-t-g-r-e-s metrics okay so it would be good this would be a good one for us to test with the road links menu link dj and g-o-p-o s-t-g-r-e-s Metrics so we can see that the icon appears here it’s probably because it’s using a font icon um voiceover on safari is smart enough not to mispronounce it as some gibberish character but I believe voiceover on ios might have trouble with this um I might give it a quick quick world later on link getting split link rough blank blank image house higher devs zo3 underscore xbox 7am.
png yes so read the docs’s ads uh have complete gibberish alt text um this is quite an egregious example because the image like literally is only text and it’s quite short text there is no reason why the images alt text couldn’t just be hiring for python while is open job and and so on uh here the alt text is the image file name actually it isn’t it’s something even blank image house higher devs o3 underscore xbox 7am. png this this is pretty bad i’m not quite sure what’s going on but this this is basically the ad is um impossible to see fostering users um i’m sure they they won’t mind skipping the ad but it’s just it’s content on the page that they can understand what the content is for and whether it matters or not link support opens link sponsored link ad served ethically link docs link edit on github link background y link get headings heading level 1 heading level 1 indices and table but we’ve already seen that form control no item form search docs search tech no landmarks navigation search navigation search main navigation navigation yes whenever you make a label for the macro this should only have shouldn’t repeat the landmark name in the label which just say main and we will say main navigation breadcrumbs navigation a single time is only to repeat the landmark name or role in the label window landmarks menu this is something where if you open this radio once on a page you’ll notice it right away windows links menu link link the latest you arc currently on a text this is probably fading the contrast search spend main navigation contents list five items link end of main navigation list five contents yes see this is what Django should do make contents list five items this link background each item in the list is a link and that’s it there’s no need to have a table link link middle list one item link doc welcome to dj ngo link edit on github end of horizontal separator and a main hack list five item link list three items level two link getting started eighty metric example image yeah so this is the same as the readme and again we probably just wanted to have a bit more alt text um might be worth a check voiceover off from here I can look at the higher res version now it would be nice to have a link to the higher to our the full image so that I can see what’s on there because the text is very small on this screenshot and I assume people would like to have a bigger version of it um I want to try one more thing which is whether I can access the version pick up with the screen reader or not voiceover on safari links menu 20 visit link read the headings menu you are currently in a voice over menu form controls menu no id landmarks men nets footer navigation content information content break main navigation search main navigation visit cert middle end of now breadcrumbs navigation end of navigation there’s no way um let’s try the keyboard the mouse new line selected versions note period versions note period link period so it’s technically in dom right after versions note this you are current read the docs read the v latest description list two items versions link link link link I mean there’s some semantics in there it’s just completely voiced overall unreachable unless you’re using a mouse essentially um yeah it’s very nice to use area like this but if you can’t reach it with the keyboard and it doesn’t appear in the rotor this is like not the right thing to focus on it is somewhere between the premature optimization and something that causes issues to people essentially um where is the toggle button for it so there is no toggle button so that’s why if you want to spend time uh using the proper semantics for an element like this you should um first start with html elements so most likely a button element for this and make sure that works correctly first rather than bother with area like this um there is quite a quite a famous model in expedity world which is that no area is better than bad area so this is the case where this is completely pointless and it will just be better with plain html that uses the correct html semantics of of this being a button um yeah nothing looks too bad in here it’s just there is no way to access this with a keyboard due to that lack of a button and then when it’s opened I can see that there is some classes changing but I can’t see any area attributes to indicate that something is open so I guess you may probably is the issue right here um revision period versions note read the dot yes you can actually access it if it’s open space others end up let you pick versions note read the doc version the latest yes all that’s missing is really just a way to tell where this is on the page and toggle it open voice over off um what’s the note region that’s going to be lots of notes can’t find it so yeah probably not a note okay where are we looks like that’s it thanks again marcus i’ll make sure to open an issue for all of these and yeah I believe that doc’s issue the majority I would read the docs the only ones I could spot with your project are a few very small things like this not being the right heading level that’s that’s that’s very small in the actual documentation content just thinking of the alt text and having a way to open the high-res image for this screenshot that should be very straightforward to fix and back in github thinking of whether you want to change the project’s name right there so it’s pronounced in a way that’s more intuitive with um text to speech the badges thinking of what alt text to use for them but honestly they are understandable enough as they are it’s just making sure that when you click them ideally they should link to some place where you can read the actual value rather than linking to the image um the dots and the ads in the email address at least something very small I wouldn’t worry about too much but it’s worth keeping in mind if you want to improve this a bit and then in the admin um we had the links like this just using labels for them would be nicer um we had the numerals formatting I think would be would be worth a look but you might disagree you might might think that this is more sensible for users to read the the value without the deformation depending on what the value is you know that’s that’s completely fair I want to check the the highlight colors here there is the way to programmatically uh annotate which where was the one was warning yes annotate which type of values is meant to be displayed so here it should say warning for screen users um a few small things about right to left surprise but honestly the fact that it’s there already in some form is quite great and yeah for the tables for smaller screen widths if you can make it so resizing those pages would still allow the table to overflow I think that would be much nicer than having those very small tables that’s all that still overflow the whole page on smaller viewports and we didn’t look at those title attributes I assume I thought the screen readers would announce it twice but maybe they have some special logic that if the title matches the label of the text then they only say so once yeah I can see the title is discarded here in the accessibility computed um name for the field so that might be what’s happening but yeah I don’t think these are these are useful I suggest removing them generally it’s a um a bad idea to have extra titles like this um we had the same thing for something but there’s so many issues with Django’s column sorting to start with that I think it would warrant further attention on the Django side before you were to consider any changes on your side um oh yeah and just this indication of the um currently active thing I don’t think this is in your module but if so would be worth a check and that’s it I hope this helps talk soon.