Phyllux TechLearn · free
Four checks before you ship
You built a page. Before you publish it, check four things: can people perceive it, operate it, understand it, and does it work robustly? These are the POUR principles. You do not need to be an expert. You can check the basics tonight.
Win: Perceive, operate, understand, robust on one real page.
Perceivable: Can people perceive the content?
Open your page. Turn off your monitor. Can you still use the page? No. This is what a blind person experiences if your page is not perceivable.
Check one: Images have alt text.
Right click an image. Choose Inspect. The HTML appears. Look for the img tag. Look for alt="something". If you see alt="", the alt is empty. If you see no alt attribute at all, it is missing.
Every image needs alt text unless it is purely decorative. Alt text describes what the image shows. "Logo of Phyllux Tech" or "Bar chart showing sales increased in March."
If the image is decorative, like a line or a background pattern, use alt="". This tells screen readers to skip it.
If alt is missing, add it. If you control the HTML, add alt="description". If you use a content management system, find the alt text field and fill it in.
If you are unsure what to write, imagine describing the image over the phone. What would you say?
Check two: Color is not the only way to convey information.
Look at your page. Do you use color to mean something? "Required fields are red." "Click the green button to continue."
Now imagine the page in grayscale. Print it or use a grayscale filter. Can you still tell which fields are required? Can you still tell which button to click?
If color is the only signal, add another signal. Put an asterisk next to required fields. Put the word "required" in the label. Put text on the button, not just a color.
Check three: Text has enough contrast.
Squint at your page. Does the text blur into the background? If yes, contrast is too low.
Use a contrast checker. Search the web for "contrast checker." You will find free tools. Enter your text color and background color. The tool tells you if the contrast passes.
The ratio should be at least 4.5 to 1 for normal text, 3 to 1 for large text. Large text is 18 pixels or bigger, or 14 pixels bold.
If the contrast fails, change the text color or the background color. Make the text darker or the background lighter.
Check four: Text can be resized.
Press Ctrl and + to zoom to 200 percent. Does the page still work? Can you still read everything? Can you still click buttons?
If text disappears or overlaps, the page is not flexible. This happens when you set fixed widths or heights in pixels. Use relative units instead. If you do not control the CSS, write down the failure and stop. This is a code problem.
If the page works at 200 percent, you pass.
Operable: Can people operate the controls?
You use a mouse. Not everyone does. Some people use only a keyboard. Some use voice commands. Some use a switch.
Check five: You can reach everything with the keyboard.
Put your mouse aside. Press Tab. The browser highlights the first interactive element: a link, a button, a form field. Press Tab again. It moves to the next element.
Tab through the entire page. Can you reach every link, every button, every form field? Can you see where you are? The browser usually draws a blue outline around the focused element.
If you cannot reach something, it is not keyboard accessible. If the outline is invisible, focus is not visible. Both are failures. Write down the failure and stop. This is a code problem.
Check six: You can operate everything with the keyboard.
You reached a button with Tab. Now press Enter or Space. Does the button activate? It should.
You reached a link. Press Enter. Does it navigate? It should.
You reached a dropdown menu. Press the arrow keys. Do they move through the options? They should.
If something does not respond to keyboard input, write down the failure and stop.
Check seven: No time limits you cannot control.
Does your page log people out after a period of inactivity? Does a message disappear after five seconds? Does a carousel auto advance?
Time limits are barriers. Some people read slowly. Some people need time to operate controls.
If you have a time limit, give people a way to extend it, turn it off, or adjust it before it starts. If you cannot do this, write down the failure and stop.
Check eight: Nothing flashes more than three times per second.
Watch your page. Does anything flash or blink rapidly? Flashing content can cause seizures.
If something flashes more than three times per second, remove it. This is not negotiable.
Understandable: Can people understand the content and how to use it?
Check nine: The page has a clear title.
Look at the browser tab. It shows the page title. Does the title describe the page? "Contact us" is clear. "Page 1" is not. "Untitled" is not.
If the title is vague, change it. The title is in the HTML head section, in the title tag.
Check ten: Headings describe the sections.
Skim the page. Read only the headings. Do they give you a sense of what each section contains?
Headings should be descriptive. "Our services" is better than "Services." "How to contact us" is better than "Contact."
If a heading is vague, rewrite it.
Check eleven: Instructions are clear.
Find a form or interactive element. Are there instructions? Do the instructions say what to do?
"Enter your email address" is clear. "Email" is less clear. No label at all is a failure.
If instructions are missing or unclear, add them or clarify them.
Check twelve: Error messages are helpful.
Fill out a form incorrectly on purpose. Leave a required field empty. Enter an invalid email address. Submit the form.
What happens? Does the page tell you what went wrong? Does it tell you how to fix it?
"Email address is required" is helpful. "Error" is not. "Invalid input" is not.
If error messages are vague, rewrite them. If there are no error messages, write down the failure and stop.
Robust: Does the page work with different tools?
Check thirteen: The HTML is valid.
Search the web for "HTML validator." You will find the W3C validator. Enter your page URL or paste your HTML. Click Check.
The validator lists errors. Some errors break accessibility. Unclosed tags, duplicate IDs, incorrect nesting.
Fix the errors you understand. If you do not understand an error, write it down and stop.
Check fourteen: The page works in a different browser.
You built the page in Chrome. Open it in Firefox. Does it still work? Open it in Edge. Does it still work?
If something breaks, write down what breaks and stop. This is a compatibility problem.
Check fifteen: The page works on a phone.
Open the page on your phone. Can you read the text without zooming? Can you tap the buttons? Do you have to scroll sideways?
If the page does not work on a phone, write down the failure and stop. This is a responsive design problem.
Check sixteen: A screen reader can navigate the page.
Windows has Narrator built in. Press Windows key + Ctrl + Enter to start it. Narrator reads the page aloud.
Press H to jump to the next heading. Does Narrator announce the heading? Press Tab to move through links. Does Narrator announce the link text?
If Narrator is silent or reads nonsense, something is wrong with the HTML. Write down what happens and stop.
Turn off Narrator: press Windows key + Ctrl + Enter again.
You checked images for alt text. You checked contrast. You tabbed through the page. You read the headings. You tested the form. You validated the HTML. You opened the page on your phone. You turned on Narrator. You found three failures. You wrote them down. You stopped. You won. Tomorrow you fix them or ask for help. Tonight you know what is broken.
Extra cuts
The long check list above is the spine. The other answers added these cautions, and they match the house rule: if the repair is unclear, write the failure down and stop.
A picture that is only decoration can have empty alt text so a screen reader skips it. A picture that carries the meaning needs words that say what it shows, the way you would say it on the phone.
Anything that flashes more than three times in a second comes off the page. That one is not a style choice.
Time limits that vanish a message or advance a carousel on their own are a barrier. If you cannot offer a way to pause them, write that down and stop.
A local model pass
Unplug the mouse for two minutes and move with Tab. Turn Narrator on for the first heading, then turn it off. Write down any check that fails. Do not invent a repair you cannot test. Novelmate Studio offered those steps.