Links, images and content meaning

Destination and action

The card link opens a report; its href should represent that actual destination. If an option only changes local state, such as expanding a panel, a button expresses that intent and needs corresponding behavior. Using href="#" to simulate every action makes copying, opening in another tab and interpreting the control less predictable.

Start with user intent rather than blue appearance or an icon’s shape.

Paths depend on context

The path relatorios/r7.html starts from the document base URL. Moving the same fragment from /guides/ to /guides/network/ can change the target even though the attribute is unchanged. A path starting with / begins at the origin root; ../ moves up one directory level.

If base with href exists, account for that URL during resolution, including fragment-only links. For a 404, compare the requested and intended targets before blaming image format or size.

Image role determines the alternative

In the card, the visual separator adds no information to the sentence and receives empty alt. The icon inside the link is its only content explaining purpose; alt identifies opening report R7. The same graphic file can need different treatment in different contexts.

Omitting alt is not equivalent to declaring a decorative image and can expose unhelpful filenames. Make the choice after reading the content surrounding the image.

Complex information and visible text

A brief label can identify a chart but does not replace twelve values needed for a decision. Provide data and a relevant explanation in text or a table associated with the chart. The goal is preserving meaning rather than transcribing every pixel.

Do not keep essential information only in title either: a hover-dependent tooltip may not reach keyboard or touch users. Necessary information should be available in a presentation appropriate to context.

Dimensions and formats have their own contracts

Consistent width and height allow aspect ratio to be anticipated before the image arrives and help reserve space. CSS can change displayed size; dimensions neither prevent that adjustment nor replace alt. If picture offers alternative sources, retain img as the element presenting the image and providing fallback.

Having several source elements does not prove any is usable in the target browser. A download decision should consider the resource actually selected and presentation conditions.

Tabular data with explicit relationships

In the example table, each service name is th with row scope and top names are th with col scope. The value 120 relates to Consulta and Pedidos. Making every td bold does not express those relationships.

This is a simple table; relationships involving several header levels can require more careful modeling. Use a table for data whose row-and-column organization has meaning, retaining that meaning when reviewing layout.

Diagnosis before correction

If an icon disappears after moving a page, check the resolved URL; if the link lacks a useful name, check textual content and alt; if a report loses context, check headers and chart alternatives. These are different problems even when occurring in one card.

Explain what observation would support each diagnosis and what remains unconfirmed. Reading the excerpt permits choosing a correction but does not demonstrate actual resource availability or complete portal accessibility.

Common pitfalls

Treating every icon as decorative; using title as an alt substitute; confusing relative URLs with root-relative paths; removing img from picture; expressing table headers only through bold text; blaming CSS for a 404 response from a different URL.