Web pages typically include many visual elements such as header and footer to support interaction with the user. However, if web pages do not comply with web accessibility guidelines, and these visual elements are not explicitly encoded in the underlying source code, they become inaccessible in alternative presentations, such as audio. This article presents an automatic role detection approach to identify visual elements in web pages and their roles. The system architecture has three major components: automatic identification of visual elements in web pages; automatic generation of heuristic rules from the knowledge base; and application of these rules for automatic annotation of visual elements with their roles. This article first explains the system architecture in detail and then presents both technical and user evaluations of the proposed approach. Our user evaluation shows that the automatic role detection approach has around 70% receptive accuracy, but the proposed knowledge base could be further improved for better results. Our technical evaluation shows that the complexity is an important performance factor in role detection - required resources and execution time increases when the web page has more complex structure.