ABOUT THE PRESENTATION
Well over 60% of web users are accessing the web on mobile devices. While the best website creators keep this in mind, they may not be considering mobile users who also have a disability. Some 25% of visitors to the most popular websites claim at least one disability. Putting these stats together, there is a great need to ensure that websites are accommodating special needs folks.
Spend an hour learning a bit about how choices in website design can affect accessibility on small screens. To prepare for this meeting, consider that users may encounter several specific challenges when accessing web content on mobile platforms, including these:
- Connectivity Issues: Mobile users may experience varying internet speeds, which can affect the loading times of web pages and content.
- Screen Size: Mobile devices have smaller screens, which can make it difficult for users to see content clearly. This can affect readability and navigation.
- Touch Targets: Users may struggle with small touch targets, making it hard to click buttons or links accurately.
- Responsive Design: If a website is not designed responsively, it may
not display correctly on mobile devices, leading to a poor user experience. - Assistive Technologies: Not all assistive technologies work seamlessly on mobile devices, which can hinder users with disabilities from accessing content effectively.
ABOUT THE PRESENTER
The product of an engineer father and painter mother, Ron Amick misspent much of his youth making short films and videos, then labored in the salt mines of the Hollywood movie machine long enough to find his big break at Disney, where he made no films but found a new love in web development. A couple of decades and several creative agencies later, he handcrafts web and mobile products and content for a variety of clients, mostly in the entertainment industry, mostly by referral, ever questing for more knowledge and new skills. “Life is a journey,” says Amick, “and I am a journeyman.”
SUMMARY
Ron Amick, the presenter, shares his background as the product of an inventor father and painter mother. He spent his youth making short films and working in the Hollywood movie industry before finding his passion in web development about 28 years ago. Amick is now dedicated to crafting web and mobile products and content for a variety of clients, mostly in the entertainment industry.
Exploring Web Accessibility Concepts
Amick introduces the free “Introduction to Web Accessibility” course offered by the W3C, the organization that defines the web. The course covers important aspects of web accessibility, including screen size, touch targets, responsive design, and assistive technologies like screen readers.
Leveraging WordPress Themes and Page Builders
Amick discusses his experience using various WordPress themes and page builders, such as Divi, GeneratePress, and Bricks Builder. He also recommends the free “Page Builders 101” course by Kevin Giri, which provides a comprehensive primer on web development and design.
Amick shares a video demonstration by Anthony Vasquez, a blind communication specialist, showcasing how he uses the VoiceOver screen reader on an iPhone to navigate a mobile app. The video highlights the importance of proper labeling and focus order for accessible web experiences.
Conclusion
Accessibility in web design is a critical consideration, especially with the growing prevalence of mobile device usage. By understanding the needs of users with disabilities and leveraging the right tools and resources, web developers can create inclusive experiences that cater to a wider audience. Continuous learning and a commitment to accessibility best practices are key to ensuring the web is accessible for all.
TRANSCRIPT
[Music]
so well over 60% of web users are accessing the web on mobile devices While the best website creators keep this in mind they may not be considering mobile users who also have a disability Some 25% of visitors to the most popular websites claim at least one disability Putting these stats together there is a great need to ensure that websites are accommodating special needs folks The product of an engineer father and painter mother Ron Amik misspent most of his youth making short films and video then labored in the salt mines of the Hollywood movie machine long enough to find his big break at Disney where he made no films but found a new love in web development A couple of decades and several creative agencies later he handcrafts web and mobile products and content for a variety of clients mostly in the entertainment industry mostly by referral ever questioning or questing for more knowledge and new skills Life is a journey says Mick And I am a journeyman At this point I’d like to invite everyone to mute their microphones and enjoy the presentation Ron thank you so much for being our presenter and the time is now yours My pleasure Thank you so much for having me here Let me let me share my screen remembering to share sound as well Um so um you already know what WordPress meetup you’re at I mean you you know you know my name Ron Ach And um you also know that I’m the product of a an inventor father and a painter mother with a film making background um and post-production management in the movie industry Um I had a completely second career that started about 28 years ago um while working in corporate Disney and um that was web development um and that is web development and I’m uh happy to share a little bit of what I’ve lately learned way late in the game about accessibility for mobile devices Um mobile devices are um actually uh let me go to this screen here What’s this one this is a good one Um mo mobile devices are not merely phones As we know today there are many many small screens all around us watches and refrigerators and car displays and TVs and so forth And these all these all require a little attention uh to make them effective for folks with disabilities of many kinds um some uh what I’m actually not a super expert I’m still learning and I intend to keep learning Ron it looks like you got muted Can you hear me now there we go Perfect I know what happened Was trying to move the bar the control bar out of the way Uh so um I’m not a super expert but I’m learning uh all the time and I’m happy to continue learning in in particular about accessibility because it does affect a huge portion of any audience and it’s foolish I mean it’s immoral on one sense to make websites and web devices difficult to use for people with disabilities but it’s also foolish from a sheerly business point of view or popularity point of view because you’re just leaving behind 20 to 25% of potential visitors Um and um what you’re seeing here is is a a very small portion of what’s called the introduction to web accessibility which is a free course that is given by uh that’s created by the W3C They’re the of course the organization that defines who you know that defines the the whole web Um and this course is excellent It’s and it’s uh it’s it’s it’s being hosted on edX Um and it’s free However if you want a certificate like you’re seeing on the screen now um you have to pay $90 for that or maybe it’s more now I’m not sure Um it took me well over a year to finish this course mainly because I I did it in really small bites Um but I strongly re strongly recommend it and I’m going to put some links for it and other things in the chat right now Let’s see So that’s in intro to web accessibility Um so um the first thing well I can go through these real quickly The screen screen size is obvious Um it’s a small screen So you know in the early days of the web of websites screen type typography was was not even adjusted So it was just microscopic on small screens it didn’t get um larger Um these days you can a a best practice for web development is to stop using um fixed sizes for many things including text um such as px pixels and use um relational ones which are em and I’ll show you that a little bit later um those are going to adjust themselves when the screen size itself adjusts And so that’s kind of an important thing Touch targets means um you know how how big is your your finger when you touch something and is the target you know big enough to accommodate the average finger basically and such like that um if they’re too small it’s not going to happen very easily Responsive design is what I was just uh alluding to with regard to typography but of course it also is much larger um a much larger subject um which is you know these days we don’t we developers and designers and web should not be overly concerned about representing the design of the web website exactly the same on desk desktop devices as as on mobile or the other way around Um rather the mobile experience needs to be a part you know on its own as as effective as possible and that’s what responsive design does It’s shows you it changes layouts um makes things bigger moves you can it deletes some items it changes the order of them on the page things like that that make it a more meaningful um online experience pardon me And I’m going to show you a little bit of that Um assistive technologies include uh screen readers which of course blind folks use but many many many many other folks use as well that actually read the the the website Um and one one that’s since iPhone is probably one of one of the most popular devices I’m going to focus mostly on iPhone for mobile Um iPhone and all Apple devices come with a a screen reader called Voice Over And it’s it’s a native screen reader And I’m going to show you what it looks like to um to use that on on a phone and and some other tricks Um connectivity just means you know if you have pages that are trying to download trying to take too much bandwidth some smaller devices can’t keep up And so that’s that’s we’re not going I’m not going to delve into that much Uh let me back up here Um I wanted to find out from users here and you could put it in the chat what WordPress themes they are currently using or what what what builders they may use Um I myself spent many years using divvy um before while I was ignorant of accessibility issu the whole subject of accessibility Today I mostly use generate press and bricks builder Some other themes that my colleagues say are worth considering for accessibility Oh Bricks Builder is being used by by uh I’m not sure who that who that is Thank you Spectra one is your theme Gerald Okay thank you So um and ETHCH is something that’s in development by Kevin Giri um who you may have heard of He’s uh the developer of a free course called Page Builders 101 which I will put the link to if you haven’t heard of this No page builder says Jared Okay Um this course which also is free It’s just on YouTube is really really really recommended for anyone of any experience level and I mean any experience level because uh and it’s not just about page builders It’s it’s a it’s just it’s a great primmer in web development uh web design um from from the ground up and uh very very succinctly presented Kevin is using bricks builder in in the course but you don’t have to It’s but it’s it’s worth worth watching worth going through in its entirety regardless of your experience level Um I you know like I said I’ve been doing this for 28 years and I’m when I watch that course I go oh I didn’t have that right and I didn’t know about that and because you know most most people working in web well most of my colleagues I should say and many people in the WordPress community are self-taught um and that’s fine but this is the first time I’ve seen a a course that really um explained everything and it’s and that’s I can’t recommend it enough Anyway um getting back to this course I’m going to show you um a demo by Anthony Vasquez Anthony Vasquez is a blind communication specialist at Nobility which is an Austinbased um accessibility organization that’s been around for about 25 years I believe Um and they um offer services You can actually hire them to evaluate a website or to test a website and they have people with disabilities such as Anthony Vasquez um who is blind And this this uh piece that I’m going to show you is from the course the intro to web accessibility course So take a look at this and it’s a self-explanatory Let me know once I start it Let me know if um you cannot hear it It’s not reacting to my commands here Let me reload this So this is this is from module two and the introduction the free course I’ve been talking about The other free course I’ve been talking about Okay that’s not letting me go to full screen and I’m not sure why Maybe if I My name is Anthony Vasquez and here I will show you how I use a screen reader to navigate a mobile app on iOS Can everyone hear this And you can see it well enough I tried to make it full screen but it’s not letting me Yeah I think it’s fine Okay Well you say that now but look how small his the little the little uh phone is on Anyway he’s he’s got an iPhone and he he does he shows how he how he reads websites on a on a on a phone using voice over which is as I said is a iPhone native app Here it goes I’m going to be covering aspects experience including exploring by touch swipe gestures the rotor heading navigation and focus order So here we have a weather app open And one way to get an idea of what’s on the screen is to just touch around the screen and listen for audio feedback currently feels and if I move my finger down a bit more and then touch further down so that’s one way I can also swipe left and right with one finger to move from previous to next elements on this screen So for example from here if I were to swipe left you will hear the previous entry mostly If I swipe again now swiping right will move down one element or to the next element mostly So I’m stopping that just for a second So you can see that this is one way that um blind folks and others with impaired vision can navigate just by swiping um back and forth And what they’re reading is is obviously that it’s they actually are not necessarily reading what’s on the screen but they’re reading the code that makes the screen and and they’re interpreting that That’s how screen readers work They actually are reading this the HTML behind the page Anyway I’ll shut up and keep going here So both ways have their advantages and disadvantages Um explore by touch If you know the layout of your screen already which buttons you want to go to is quite efficient moving uh swiping left and right is helpful when it’s your first time exploring a new screen because you get an idea of all the focusable elements on the screen Now another way to change ways of exploring a page or a screen on an app is to use the rotor So if I were to set my rotor to headings you’ll be able to explore by headings There quite an interesting gesture actually You need to take two fingers and rotate them clockwise or counterclockwise Kind of like if you’re turning a knob or a dial So I’ll do that now Language characters words headings Ah there we are at headings And if I swipe up I will move to the previous heading Heading not If I swipe down I will move to the next heading See heading not found Okay so there are no headings on this screen which uh is unfortunate because if there were you could structure the information in a way that’d be easier to get to So if you’re following he he’s got voice over turned on which you can find in setting settings settings on any iPhone And he’s using two fingers to to spin this imaginary dial which actually now includes includes more um more options than he had available to him at the time that this was recorded Um and then since he chose headings he then is swiping down to go from heading to heading But unfortunately on this page there are no headings which is um another cry for the importance of good headings headings usually are uh announced or created with the tag the H1 H1 H2 H3 H4 H5 H6 tags in the HTML But there are other ways to make to make uh headings Anyway I’ll continue here moving among headings much like you would on a web page Now it’s important again to know that these swipe gestures you know move from focusable element to focusable element but they need to be labeled as such So near the top of this page is an element But it’s neither labeled as a button nor a link So I don’t know what it is I’m left to guess whether doubletapping it will do anything Let’s find out Ah currents So now we’re on a new screen The screen reader just said current conditions And let’s uh swipe right Wind So these same gestures from before can be So I just stop it again because he’s he he opened what’s called a modal a floating window floating temporary window that that effectively becomes another page and he he to him though it wasn’t it was an entire entirely new page which it kind of is Um one thing to keep in mind on if you make popups in your website is to ensure that they do not trap someone on them and that there’s a way to exit them Um you can see there’s a done button at the bottom here and that’s that’s good So any continue used here Now an example of a focusable element is near the bottom There’s a button labeled done If I double tap it we will go to the previous screen Search location Well I hope that this has been helpful in giving you a better understanding about my experience with mobile apps how I use explore by touch how I use gestures the rotor heading navigation and the importance of focusable elements and focus order So he’s talking about focus focusable elements That’s something that obviously will help him but um also uh helps um folks who for some reason cannot use a mouse because focusable elements um are what um what you what you can illuminate using keyboard Um let me go to a site here So on this site for instance if I reload this page and I just merely press my tab key it you see that there is something that came up on the upper leftand corner called skip to content And if I were to hit enter on that it would jump past the navigation And now if I hit tab again it goes to the next link available And you see it highlights it It makes it focusable So any link on the page will become available um by someone that doesn’t have any other way to navigate I’m using shift tab to go backwards on the same page So um that’s a really quick overview of voice over Let me see if I can um stop sharing and share my screen from let’s see stop share Duh Okay Okay I have a I’m also logged in with my alter ego um on an iPhone and let me see if I can share it screen I tried this once before and it didn’t work But unable to access camera Okay I have to set some settings first One second Bear with me Okay So that probably logged me off All right Well I’ll try to get this on in a second One second here please Okay going to reload Sorry about this This kind of thing only happens when you do live demonstrations I’m admitting myself back into Okay try this again There we go Okay so um if I go to settings on my phone you can’t see it It’s not showing up is it it’s just Oh I see It’s It’s only sharing my uh my camera Duh All right I’m going to have to try this some other time This is a little harder than I thought but the idea is I can show you my phone Um if I go into settings and if I’m at the top normally one second Okay if you come up you come up on on a screen that shows you your name If you just go down a little bit you’ll see accessibility right away which is right You’ll see it I won’t Okay accessibility is right there And now you probably can’t see that too well Anyway the very top the very top choice is voice over and it’s presently off So if I turn that on then then it tells me that it’s it’s talking to me now and it tells me that it’s um that it’s on So um and now what I’m trying to do is switch to a web page You have to double click to to open a link Um well that’s the one I want Okay So here’s a website Sorry that took so long Here’s a website that I’m on and I’m going to try using the the two-finger rotor So I’m I’m just using two fingers and um you probably can’t hear what it’s saying but it’s it’s it’s there’s characters at the top Edit form controls links headings and one more containers Okay So if I shoot choose containers let’s see what that does When I navigate this way it says Larry Co menu button That’s the name of the artist here Featured album jazz that speaks to you Let me make this louder Screenshot button album cover shows David David Rodstein Larry Coons announcing elite guitarist online instruction heading level two So you can you get the idea There’s a lot of ways to use it That speaks to you Album cover shows David at the piano with announcing elite guitarist online instruction All right So I won’t bother you with more of that Wasn’t the demo that I was hoping it would be Um let me go back to my sharing So um next I want to just show you some code assuming everyone’s still awake And um first I’ll show you uh first I’ll show you generate press if I can find it See where did I put it press I put where Okay go I have to turn off voice over or it’s going to keep talking to me Okay Um see now this will work I’m just going to a page in this site that I showed you a minute ago with the sports car the racing car Um so this page here so um in this page you see that there is text flowing around an image um and that’s fine for a nice big web page but if I mimic a small website What happens i’m going to turn on mobile view and just widen it out a little bit Turn this to responsive So um this is the view you saw a minute ago but when the screen gets smaller I’ve told it to you know stop trying to fit that text on the side and instead go to this view with a 100% width on the image and the text below it So that’s an example right there of a relational or I’m sorry responsive um change a responsive design change And how did I do that um in generate press um here’s the layout for desktop And what you can do is you can choose the image And over on the right side here I’m not sure you can see that are three little tabs And they say desktop Well show options for all devices is what it says but it’s for desktop And the middle one’s for tablet And the little one is for mobile or smaller So what I’ve done is um on desktop this image’s width I have set to 380 pixels which is necessary in order to make the text flow around it But when you switch to mobile view it’s 100% set to 100% width So that’s just one very simple example Just doing that made what I showed you possible Made made it happen Um in brakes um there actually are more views than that Um there’s there’s any number of um break points is what the bricks people call them So this is you’re looking at desktop here and it says desktop base breakpoint tablet means less than or equal to 991 pixels That’s what it’s set to now Um tablet in landscape mode uh less than less than or equal to 79 767 pixels and mobile portrait was what we most most often use I’m sorry This is mobile not tablet Mobile landscape Mobile portrait is is the one that’s the trickiest which is currently set at less than or equal to 478 pixels So um some things on this page also needed to be changed Some things are stacked here that are not stacked here So and and then and what I’ve done is told it the order of the stacking to some in some cases having to change what’s called order um so that the image will will preede the text whereas in desktop view it’s just text to it beside it So um those are two very quick relational examples And um I’m going to leave it there since we’re at 3:45 already and leave some time for questions And I know this is very uh disjointed but um I hope that it was useful in some other ways I’m going to put uh some more links one’s for nobility and one’s for WUKAG which is the body that makes the guidelines Sorry I didn’t um I didn’t hit enter on the when I put the page builder link in Now I have I need to go to computers 101 So here’s three links in a row um which may be known to some of you or um and um if you go to Wukag guidelines you’ll see how how uh intense it is I mean it’s it’s a whole lot to take on It’s a whole bunch of guidelines on many many aspects and you one should never feel bad if um they are not able to instantly absorb all those and that’s what that course is for This course explains you know it it says that it is it knows it’s daunting and let’s first just look at some people out there using the web and how and see how they’re using it and go slowly into it and you can go at your own pace with this course So I recommend it Um if you want to reach me I’m available here And if anybody wants for some reason a PDF of this slideshow such as it is uh let me know Contact me and I’ll I’ll send it to you
[Music]
Latest posts by Rob Watson (see all)
- Ron Amick – Accessibility for Mobile Devices - March 20, 2025
- Sue Polinsky – Above the Fold: Keeping Visitors on Your WordPress Website - February 20, 2025
- Reed Piernock – Writing Expressive and Effective ALT Text - January 17, 2025
Recent Comments