Need a Website? Do-It-Yourself WordPress and Accessibility

Member of the AppleVis Blog Team

In case there was any doubt I'm a nerd, I recently set up WordPress v4.9.5 on my web server. WordPress is a free open source Content Management System (CMS) commonly used for blogging.

I know, the average AppleVis reader doesn't run their own web server or configure their own local WordPress site. Most use WordPress.com. Pros and cons to both approaches are described in this article comparing WordPress.com to DIY WordPress.

I used Safari, VoiceOver, and Terminal on MacOS v10.13.4 High Sierra for the entire process. This article focuses on the accessibility issues I encountered with WordPress, the WordPress plugins I installed, and the web-based services I used.

My web server is a Debian 7 Linux system, but I set up a second server and WordPress site on my MacBook Pro as a test. Because Linux and MacOS are both UNIX-like operating systems, there's very little difference between the two. This article applies to both MacOS and Linux, and describes differences when necessary.

While the concepts in this blog are technical in nature, there isn't a lot of technical detail. My deep dark secret? I don't actually know a lot of the technical details. But the internet is my manual. When I don't know something, I look it up with a web search. I've included links to many helpful online resources and step-by-step guides in this blog.

A Little About Terminal

I don't care for the way Terminal works with VoiceOver, so I installed TDSR for my Terminal screen reader. TDSR makes Terminal feel much more like SpeakUp running on a Linux console. In my opinion, it provides a better interface for reading lines of Terminal text and performing copy and paste operations.

Command line interfaces are inherently accessible. No unlabeled graphics or buttons, no clumsy mouseover controls, no endless menu hierarchies to navigate. Just text read through a screen reader. But you have to know what you're doing. The screen reader won't prompt you with options. See Taming the Terminal for an extensive overview.

Even though my web server is Linux, I use it through Terminal on my Mac. I can't remember the last time I used my Linux console directly.

Setting Up a LAMP System

This article doesn't cover setting up LAMP (Linux, Apache, MySQL, and PHP). Plenty of web resources detail this process. Here are a couple guides to help turn your computer into a web server.

The tasks are similar for MacOS and Linux, but the commands vary between operating systems. The process is entirely command-line based. Terminal plus TDSR (or whatever screen reader you select) eliminates all accessibility issues.

While setting up my MacBook as a web server, I noted some differences between MacOS and Linux that you should be aware of.

  • High Sierra ships with PHP7, while Sierra shipped with PHP5. Keep this in mind when editing your Apache2 httpd.conf file.
  • I couldn't get the latest MySQL v8.0.11 to work. I used MySQL v5.7.22 instead.
  • You can use the MySQL pane in System Preferences to start and stop MySQL. This is fully accessible with VoiceOver.
  • Rather than create MySQL databases and users at the command line, you might want to use the web-based phpMyAdmin instead. Here's a MacOS LAMP guide that includes phpMyAdmin, and a guide for creating MySQL databases using phpMyAdmin. The phpMyAdmin interface is accessible, but I found it to be extremely complex.

Secure Your Domain with SSL

Before installing WordPress, I added an SSL certificate to my domain. An SSL certificate enables an encrypted connection between a web browser and web server. Properly configured SSL encrypts login and password credentials, so they can't be intercepted from web traffic. This means my WordPress admin password stays private.

If you're setting up an eCommerce site, you'll probably want an SSL certificate with a warranty, and those cost money. I don't need a warranty for my site, so I went with Let's Encrypt, a free SSL service.

Let's Encrypt makes setting up the SSL certificate entirely painless. A script called CertBot does everything with a single command line, including updating dependencies, obtaining and installing the certificate, and configuring Apache2 to redirect HTTP requests as HTTPS. The only thing I had to do manually was add HTTPS port 443 access through my local firewall.

Installing WordPress

Here's a guide for installing WordPress. It uses wget to obtain the latest WordPress PHP source. The wget command is fine for a Linux web server, but not available on MacOS by default. Instead of wget, use Safari to download the latest WordPress distribution then unzip it into your DocumentRoot or Apache hierarchy. That's /Library/WebServer/Documents on MacOS, and /var/www/html on most Linux systems. The WordPress.org download page is accessible.

The installation requires you to edit a wp-config.php file, but the previous link doesn't show this in an accessible way. The variables you must specify are DB_NAME, DB_USER, and DB_PASSWORD. The values depend on how you created your MySQL database. I hope you wrote them down.

After installing WordPress, open your WordPress site in Safari to view the welcome page and complete the setup. In a typical installation, your WordPress site URL is your domain name. I experience no accessibility issues with the WordPress welcome and setup pages.

MacOS Smart Invert Colors

If you're low vision like me, you may have noticed the installing WordPress web page illustrates installation steps using images of text with default black text on a white background. There is no alt text. Using Safari on MacOS 10.13.4 with colors inverted, the images do not invert. Here's an AppleVis forum discussion of the MacOS smart invert issue. For low vision users, the only solution is to install a second web browser that inverts images, such as Firefox, to view text images as white on black. This was the only MacOS accessibility issue I encountered.

The website doesn't rely on images for essential information, but if you're low vision, you might want Firefox for other websites that do, such as CloudFlare (see below).

MySQL Lockout!

WordPress stores all your blogs, pages, and comments in a MySQL database. To create a MySQL database, you must have MySQL administrator privileges.

I'm borderline OCD when it comes to keeping records and notes about how I set up my web server. That's why I was surprised to find that I had lost the administrator password for MySQL. Note to self—Take better notes.

Never fear. As long as you have root privilege on your MySQL host, you can reset the MySQL administrator password.

Using WordPress

Accessibility is trending in the open source community. Many large open source projects have taken steps to ensure their core components meet minimum accessibility standards, and WordPress is no exception. Some WordPress plugins might have accessibility issues. For now I want to focus on WordPress.

Core WordPress v4.9.5 is accessible out of the box using Safari and VoiceOver on MacOS v10.13.4 High Sierra. Within seconds of installing WordPress and stepping through the welcome pages, I was browsing my default WordPress site and the administrator backend, all of which were 100% accessible with Safari and VoiceOver.

Getting Around in the Administrator Backend

The WordPress administrator backend consists of a main menu control and a main content area that varies depending on the main menu selection.

The main menu control appears first in navigation. VO+right arrow a few times until you hear "Dashboard link" and "Home link", the first two main menu entries.

To skip past the entire main menu, jump to the first header, which is the start of the main content area. Note that the header of the main menu area often has the same name as the corresponding main menu entry. The difference is that the main menu entry is a link. Using Themes as an example, VoiceOver reads the main menu entry as "Themes Link", and read the header of the main content area as "Heading Level 1 Themes" or just "Themes" if you lower your VoiceOver verbosity.

After I became familiar with the main menu, I used VO+F to search for the entry I wanted, Dashboard, Themes, Plugins, whatever. I found this to be more efficient than VO+right arrow navigation.

Choosing a Theme

We want our WordPress site to be accessible. However, living in a sighted world, we also want it to look good. WordPress offers thousands of themes that affect not just the visual appearance of our site, but also the accessibility. Many themes come from third parties that aren't as concerned about accessibility as we are.

Use your newfound WP admin fu to jump to the Themes main content header. (Need help? VO+F and search for Themes. When you hear "Themes Link", select it with VO+spacebar, then jump to the first header on the page.) Core WordPress comes with a very limited number of themes. To browse and download other themes, VO+right arrow to the Add New link and select it.

The Add Themes page contains a search box. Try searching for "accessible" or "accessibility" to find themes that advertise accessible design in their description. But don't take their word for it—WordPress has a live preview mode that lets you take a theme for a test run and check accessibility yourself.

My advice is to select your theme with the help of a sighted friend. They're essential for telling you how it looks, obviously. But, in my experience, some of the controls get rather confusing when you enter live preview mode.

Assuming your site is up and you've selected a beautiful and accessible theme, next you'll want to make the website actually work.

WordPress Wants to Talk to You with Mail

WordPress sends an email every time someone posts a comment on your site. If you add a contact form, WordPress sends an email with the form content. But you won't get any email unless your WordPress site can send external mail.

I used a free web-based mail transfer agent (MTA) called MailGun.com. MailGun's WordPress plugin enables your WordPress site to send external email. Both the MailGun website and plugin were accessible, though as a low vision user I didn't care for the website's use of graphics and colors.

Just as a warning, MailGun needs your cell phone to send you a code when you first sign up for the service.

To use MailGun, you must add some DNS records to your domain name registrar. For me, that meant dealing with GoDaddy.

GoDaddy—The Poster Child for Web Accessibility

When I first started using GoDaddy for domain management, I had much better eyesight. Now that I'm practically blind, I regret that decision. The GoDaddy.com website is an accessibility nightmare. Here are a few issues:

  • There is no Skip to Main Content link on any of the pages.
  • The alphabetical menu to select country and region doesn't support first letter navigation.
  • The site makes heavy use of dialogs that are difficult to navigate using every screen reader I've tried.
  • For low vision users, the site mixes color schemes and displays text with a wide variety of font sizes. This causes problems for anyone using invert colors or magnification.
  • The site over-markets. Web pages are filled with options to upgrade service or buy new products, which are often unrelated to other tasks on the page. These controls add clutter and impede site navigation.
  • Tables fail to properly use column headers.
  • Surprise! Many checkboxes and buttons aren't labeled.

Sadly, I could go on. But it's actually painful to enumerate these issues. My accessibility grade for GoDaddy is a D minus.

Stopping DDOS Attacks with a Firewall

CloudFlare is a proxy server that sits in front of your website. Its firewall prevents distributed denial-of-service (DDOS) attacks and blocks countries or IP addresses that you specify. The service is free with several paid upgrade options.

Setting up CloudFlare involves several components.

  • The CloudFlare website
  • The CloudFlare plugin for WordPress
  • The CloudFlare module for Apache2
  • Changing your domain name server (DNS)

The CloudFlare Website

Their website is usable but has some accessibility issues.

  • Their landing page hides signing up for their free service. Do a VO+F and search for the Pricing link,
  • Most of their web pages mix color schemes, light-on-dark and dark-on-light, which is problematic for low vision users.
  • Their analytics page displays a line graph with mouseover data. There's no way to download analytics as a CSV or other tabular format.
  • Reminiscent of GoDaddy's overmarketing, their dashboard commingles controls for free and paid services. (I understand they're trying to make money, but they don't realize how this sales technique impacts accessibility.)
  • Their site contains extensive blog articles that explain how to use their services. Unfortunately, they sometimes contain screenshots of critical information with no ALT text.

I give CloudFlare's website a C for accessibility. I suggest you use this service with a sighted assistant.

Controlling CloudFlare Using WordPress

The WordPress plugin for CloudFlare simplifies configuration of the service. There are some order issues with the plugin's Settings main page content, and again the analytics display is visual-only and completely not accessible, but otherwise the plugin is accessible and entirely usable.

CloudFlare and Apache2

Because CloudFlare puts a proxy server in front of your website, the IP addresses in your Apache2 log files no longer reflect the actual IP address of the HTTP requests. The CloudFlare Apache2 module fixes this issue. I followed this CloudFlare support article for adding their Apache2 module. It's all command-line. No accessibility issues here.

Changing Your DNS

To use CloudFlare, you must change your domain name server (DNS). For me, that meant another visit to GoDaddy, as I already did for MailGun. And the same accessibility issues apply. I envy those of you who use an accessible domain name registrar.

The upside? After changing my DNS to CloudFlare, I use GoDaddy a lot less. CloudFlare might not be a panacea of accessibility, but at least it's not GoDaddy.

Adding WordPress Functionality with Plugins

The WordPress ecosystem provides thousands of plugins to enhance WordPress functionality. If core WordPress doesn't do what you want, try a web search for a WordPress plugin.

Adding a plugin is accessible. Go to the WordPress administrator dashboard and select Plugins off the main menu. Then navigate to the Add New link just after the Plugins heading. Use the search box to locate and install the plugin.

Here are five free plugins I use on my site.

  • iThemes Security As a popular open source CMS, WordPress sites are susceptible to web attacks. iThemes provides several controls to reduce attacks, such as hiding the login page and administrator backend.
  • WP_RSS_aggregator Core WordPress doesn't support displaying an external RSS feed. I was as shocked as you were. Fortunately, it's easy to display an RSS feed with this plugin.
  • Contact Form 7 Core WordPress themes don't provide a contact form. If you want visitors to contact you, you'll need a plugin such as Contact Form 7.
  • Google Captcha (ReCAPTCHA) Robots can easily submit bogus comments on your blog posts and send you spam email through your contact form. The Google Captcha plugin provides a robot-proof checkbox challenge, ensuring only humans submit comments.
  • Google XML Sitemaps This plugin regenerates an XML sitemap file any time you add new content to your site. Web crawlers such as Google, Bing, Yahoo, and others use this sitemap to index your site, helping ensure your pages turn up in web search results.

All plugin Settings pages were accessible. Some had minor issues with content ordering or use of HTML headers.

Note that the Google Captcha plugin requires you to do some additional configuration on Google's web page. As you might guess, I encountered some minor accessibility issues with Google's Captcha web page, but nothing that would stop a determined AppleVis geek.

Conclusion

Setting up a do-it-yourself WordPress site on your MacOS or Linux system is accessible and, in case you missed it, entirely free.

Most accessibility issues stemmed from web pages of services I selected myself. GoDaddy is a big culprit. CloudFlare also had some issues. If you know of accessible domain registrars and proxy firewall services, please post in the comments.

Selecting a theme for visual aesthetics is inherently non-accessible, obviously. However, you can evaluate themes for accessibility before you enable them.

If others in the AppleVis community are actively managing web servers, with or without WordPress, I'd love to hear what you're doing. Please post a comment below.

Blog Tags: 

18 Comments

#1 Issue with CloudFlare and Let's Encrypt

Member of the AppleVis Blog Team

Here's an article that describes an issue I encountered.
https://blog.justinwflory.com/2015/12/wordpress-cron-cloudflare-ssl/
WordPress does lots of things automatically. I noticed many of them weren't happening, notably, an RSS feed I displayed on my WP site wasn't updating. The article describes a fix - a single line added to /etc/hosts, and a way to test for the issue using curl at the command line.

If I encounter any other issues, I'll post here, along with fixes. But hopefully that's it! :-)

#2 dns registrar

App Developer

Hello,
I have found hover's website to be quite accessible, at least in comparison to the dumpster-fire that is the GoDaddy interface.

#3 Re: DNS registrar

Member of the AppleVis Blog Team

Nice tip, thanks.

#4 Managing website components with composer

App Developer

Hi,

You could always use composer to manage Wordpress and its plugins. It helps keep everything up to date all at the same time, and it also manages dependencies for Wordpress themes and plugins.

#6 WordPress and Dreamwidth, and LJ?

Hello. I wanted to post a comment here before embarking on my packing up journey, lol! Going on a mini-vacation this weekend. But anyway, I'm wondering if any of you have checked out Dreamwidth Studios, LLC? That's the platform I'm using for my personal website, and I found it to be completely accessible on the Mac with both VO and Chromevox Classic. It has similarities to LJ and WP, and both co-founders worked for LJ in its start-up days. I have checked out the WP interface and in fact I now contribute to a blog hosted over there. Unfortunately the theme that the site owner is using doesn't seem terribly accessible, but I'm discussing that with him and will definitely direct him to your post here. He's visually impaired too, go figure. Anyway posting by email seems to be the only way I can contribute there. But I've been on Dreamwidth since 2014 and couldn't be happier. Just have a look at my journal and you'll see what I mean.

#7 Don't Forget Hosting Services

This is super good but there are definitely folks, like myself, that don't have the time or patience to host the server. There are tons of hosting services that you can pay to use and all you have to do is set up an account, install Wordpress, and you're off to the races!
I've set up probably 5 or 6 different sites over the years all using Wordpress and they're really easy to do once you understand the process.
I think I pay $4 a month for the one I'm using now and it's been 5 years with not a single problem.
Great post though. I know that Wordpress has an accessibility team that is always trying to make the experience better for their users. I highly recommend it.

#8 Re: Hosting Services

Member of the AppleVis Blog Team

Hi Mike. I wish I had experience with hosting services before I posted this article. As it turns out, about a day after this blog went up on AppleVis, a friend asked if I'd be willing to do some admin on her WordPress site. And it turned out she was using BlueHost. At first, I was worried BlueHost would not provide an accessible interface. So I timidly dove in. Much to my glee, I discovered that BlueHost gave me the exact same WordPress admin backend that I already knew and loved from hosting my own WordPress website. Her site was easy for me to administer because I already knew the interface. I just had to get familiar with the plugins and theme she had selected.

So, yes, point well-taken. Using a hosting service such as BlueHost or (I imagine) many others provides a viable alternative to setting up LAMP or MAMP on your own system. If anyone else has experience with hosting services and would like to rate their accessibility, please comment.

#9 Hosting Services

So I have personal experience with Dream Host and Just Host. Dream Host as far as I can tell has a custom interface but it was accessible.
Just Host and I know a few others use C Panel which also works really well. It's easy to make changes, add email accounts, and all sorts of other things. For all the basics and non technical tasks both of those services have been great.
There are a ton of companies that offer hosting and I recommend anyone interested shop around, ask questions, and if you can't find answers they all have support that I'm sure you could contact before making any purchases to ensure accessibility. Any company that can't make sure you're taken care of isn't worth your money.

#10 Ultrahost

Hello,
I use a service called Ultrahost to host my website. It uses cpanel. The gentleman that does there technical support is blind himself. They do both domain registration and hosting. I have their unlimited plan and it costs $100 a year. The domain I registered with them is $20 a year so it ends up costing me around $120 a year in total for my website. Their website its:
www.ultrahost.us

Greg Wocher

#11 Cloudflare

Paul, to be quite honest, unless a person is expecting to be subjected to political censorship, DDOS attack, etc, I think Cloudflare just adds a huge layer of complexity to getting a website up & running. I don't know if you have the free or paid version, but last I worked w/the free 1, they'd only let you install a self-signed cert, which will generate errors aplenty from any browser that attempts to visit it using https. I think there are plenty of firewals that you can get besides Cloudflare that will protect a site & not involve the amount of complexity Cloudflare exhibits. So folks, don't let the discussion about Cloudflare scare you from making a website. I'm a hosting provider, & let me assure everyone there are a lot more accessible alternatives than GoDaddy. So please don't think that's your only alternative either. My site is www.brighter-vision.com, where you can find some articles on the subject & request 1 if a topic interests you & you'd like to read more.

#12 Re: CloudFlare

Member of the AppleVis Blog Team

I think you're right about CloudFlare. Other than defense against DDOS, their free service offers nothing that I can't get from free WordPress plugins.

However, now that CloudFlare manages my DNS, I have almost zero interactions with the GoDaddy website, so that's certainly a plus. LOL. As an aside, my domain is up for renewal in a few months, and I'll likely switch it over to another registrar. Someone previously mentioned hover.com, for example.

#13 Hosting services and Wordpress

this is a pretty nice guide. I've had my websites down for quite some time, because of a few issues. Mainly starting with bad hosting service providers.
I first started with Dream host, but the log in panel wasn't exactly friendly with VoiceOver. Which was a bummer, because even though I understand this stuff. I'm still new to it. They really knew their stuff.
Since it wasn't accessible. I went with Host gator after that month. that's a choice I really regret. While they had an OK panel in terms of accessibility. My experience with the EIG branded hosting providers just isn't executable for me. to you guys it may be, but not for me.
I'll have to take a look at Ultrahost. I myself was thinking of either Digital Ocean, which will require some computer knowhow. That or Big scoot. I talked on the phone with the rep, and that guy was very helpful.
I would really like to have my own web server, but where I live I don't think speeds would be suitable as we've not got gigabit connections yet.
I'm not too certain what else having my own web server at home would serve. although having my own server would allow more immediate control which is a plus for me.
I do like wordpress, because it's a great tool for creating many websites. I've got many website ideas in mind, and much would work fine with Wordpress, and a few Plug-ins.
Chuck

#14 Addendum to My Previous Reply

Hello all. I was in kinda a rush when I posted my previous reply, but here is more info about Dreamwidth for those of you still looking for a web-hosting service. I have a free account on there, but they also offer paid accounts. In addition, you can give somebody a paid account as a gift. I'm not exactly sure how to do this, but somebody upgraded me to a paid account. It was only for one month if I remember correctly, but I found the paid features available to me at the time to be very accessible. The other thing I want to say is that Dreamwidth makes available a downloadable package which I think is highly configurable. I don't know about its accessibility since I'm only using the online service, but you can check their FAQs or file a support request. They are pretty good about responding to these, although it seems that within the past year or so they've been a bit short-staffed.

#17 Re: Accessibility of Wordpress 5

My Wordpress installation (that is being hosted by 1and1) was recently upgraded to Wordpress 5. As you say, out of the box, this is not very friendly at all to screen reader users.

Since the Wordpress team is sensitive to accessibility issues, they created a "Classic Plug-in" for Wordpress that restores the interface to what we were used to using successfully in version of Wordpress prior to version 5.

They indicate that they will continue to support the classic plug-in until about 2022 or as long as necesssary if it is needed beyond then.

Just search for the classic plug-in and install it and you'll be set to go again with an interface that is familiar and works with screen readers.

Hope that helps.

--Pete

#18 Re: WordPress 5 Accessibility

Member of the AppleVis Blog Team

Thanks for mentioning the classic editor plugin.

I haven't tried the new Gutenberg editor. According to that article, it's accessible with a slew of keyboard shortcuts. I'm really in no mood to memorize a bunch of WordPress-specific shortcuts, and why they can't just make it work with VoiceOver, we'll never know. The de facto standard accessibility solution for a web page is custom keyboard shortcuts. This is an industry trend I'd like to see reversed.